成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css實現(xiàn)div水平/垂直居中的N中方法

張紅新 / 1990人閱讀

摘要：父內(nèi)部的所有子水平居中代碼子元素縱向排列水平居中代碼子元素橫向排列且水平居中代碼子元素縱向排列垂直居中代碼子元素橫向排列垂直居中代碼子元素水平方向垂直方向都居中方式一代碼子元素水平方向垂直方向都居中方式二如果有多個子元素會

1、父div內(nèi)部的所有子div水平居中

// html 代碼


    

    

    




/*子元素縱向排列水平居中*/
// css 代碼
.parent{
    width: 400px; 
    height: 600px; 
} 
.chil{ 
    width: 120px;
    height: 120px; 
    margin: 0 auto; 
}

/*子元素橫向排列且水平居中*/
//css代碼
.parent{
    width: 400px;
    height: 400px;
    text-align: center;

}
.chil{
    width: 120px;    
    height: 120px;
    display: inline-block;
}

/*子元素縱向排列垂直居中*/
//css 代碼
.parent{
    width: 400px; 
    height: 600px; 
    display: table-cell; 
    vertical-align: middle; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
}

/*子元素橫向排列垂直居中*/
// cs 代碼
.parent{
    width: 400px; 
    height: 400px; 
    display: flex; 
    align-items:center; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
}

/*子元素水平方向垂直方向都居中 方式一*/
//css代碼
.parent{
    width: 400px; 
    height: 400px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
    display: inline-block; 
}

/*子元素水平方向垂直方向都居中 方式二 如果有多個子元素會重疊在父元素中心位置*/
//css代碼
.parent{
    width: 400px; 
    height: 400px; 
    position: relative; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform:translate(-50%, -50%);
    //transform:translate(0, -50%); 垂直方向上居中且多個子元素重疊
    //transform:translate(-50%); 水平方向上居中且多個子元素重疊
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49883.html

相關(guān)文章

  • css實現(xiàn)div水平/垂直居中的N中方法

    摘要：父內(nèi)部的所有子水平居中代碼子元素縱向排列水平居中代碼子元素橫向排列且水平居中代碼子元素縱向排列垂直居中代碼子元素橫向排列垂直居中代碼子元素水平方向垂直方向都居中方式一代碼子元素水平方向垂直方向都居中方式二如果有多個子元素會 1、父div內(nèi)部的所有子div水平居中 // html 代碼 /*子元素縱向排列水平居中*/ // css 代碼 .parent...

    miqt 評論0 收藏0

  • 水平垂直居中

    摘要：它為什么備受關(guān)注并不是因為它難實現(xiàn)，而是因為實現(xiàn)的策略太多了，讓人無可下手，無可選擇。多行塊級元素實現(xiàn)原理同水平居中的水平垂直居中綜合運用水平垂直居中即可。 它為什么備受關(guān)注？ 并不是因為它難實現(xiàn)，而是因為實現(xiàn)的策略太多了，讓人無可下手，無可選擇。 將各個問題分類，給出常用解 水平居中 行內(nèi)元素： text-align:center html: text-align:cent...

    MingjunYang 評論0 收藏0

  • 【第1期】聊聊css居中那點事

    摘要：前言居中是網(wǎng)頁布局中再常見不過的一種方式了，今天我們就來聊聊居中的那點事。我是水平居中的同樣是針對塊級元素才有效果。來看代碼我是水平居中的必須配合來使用來可以實現(xiàn)居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問題。 前言：居中是網(wǎng)頁布局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點事。 我們主要從這幾個方面來了解下居中： 水平居中 垂直居中 水平垂直居中 水平...

    劉永祥 評論0 收藏0

  • CSS-水平居中、垂直居中、水平垂直居中

    摘要：水平居中水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中行內(nèi)元素水平居中這里行內(nèi)元素是指文本圖像按鈕超鏈接等，只需給父元素設(shè)置即可實現(xiàn)。 1、水平居中 水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中 1.1 行內(nèi)元素水平居中 這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實現(xiàn)。 .center{ te...

    scwang90 評論0 收藏0

  • CSS-水平居中、垂直居中、水平垂直居中

    摘要：水平居中水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中行內(nèi)元素水平居中這里行內(nèi)元素是指文本圖像按鈕超鏈接等，只需給父元素設(shè)置即可實現(xiàn)。 1、水平居中 水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中 1.1 行內(nèi)元素水平居中 這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實現(xiàn)。 .center{ te...

    Lsnsh 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<