css實(shí)現(xiàn)垂直居中

raise_yang 發(fā)布于2019-04-23 13:16 / 1217人閱讀

摘要：結(jié)構(gòu)垂直居中默認(rèn)樣式結(jié)構(gòu)該方法兼容，火狐，谷歌，并且是否有寬高都可以。兼容火狐谷歌參考布局左右居中上下居中絕對(duì)定位和負(fù)邊距該方法兼容，火狐，谷歌，必須有寬高。

html結(jié)構(gòu)

<div class="box box2">
    <span class="content content2">垂直居中span>
div>

默認(rèn)css樣式結(jié)構(gòu)

.box{
    width:200px;
    height:200px;
    background-color:green;   
}
.content{
    background-color:yellow;   
}

1. table-cell ? ? 該方法兼容IE8+，火狐，谷歌，并且content是否有寬高都可以。? 注：IE8+ 包含 IE8

.box2{
    display:table-cell;      //此元素會(huì)作為一個(gè)表格單元格顯示（類似  和 ）
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}

2. display: flex; ???? 該方法不兼容IE8，IE9，content是否有寬高都可以。兼容火狐、谷歌

參考flex布局：https://www.cnblogs.com/qingchunshiguang/p/8011103.html

.box2{
    display: flex;
    justify-content:center;  //左右居中
    align-items:center;      //上下居中
}

3. 絕對(duì)定位和負(fù)邊距 ? ? ?該方法兼容IE8+，火狐，谷歌，content必須有寬高。

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-40px;
}

4. 絕對(duì)定位和0?????? 該方法兼容IE8+，火狐，谷歌，content必須有寬高。

.box2{
    position:relative;
}
.content2{
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

5. 絕對(duì)定位和transform? ?? 該方法不兼容IE8，兼容IE9+，火狐，谷歌，content是否有寬高都可以。

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

6. display:flex 和 margin:auto ???? content有寬高：不兼容IE8，IE9，content沒有寬高：不兼容IE。有無寬高都兼容火狐、谷歌。

.box2{
    display: flex;
    text-align: center;
}
.box2 .content2{margin: auto;}

參考網(wǎng)址：https://www.cnblogs.com/hutuzhu/p/4450850.html

云服務(wù)器 GPU云服務(wù)器實(shí)現(xiàn)垂直居中垂直居中水平垂直居中文字垂直居中

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1648.html

相關(guān)文章

【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對(duì)內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡(jiǎn)言 CSS居中是前端工程師經(jīng)常要面對(duì)的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評(píng)論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對(duì)內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡(jiǎn)言 CSS居中是前端工程師經(jīng)常要面對(duì)的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Scholer 2019-08-02 16:14 評(píng)論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對(duì)內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡(jiǎn)言 CSS居中是前端工程師經(jīng)常要面對(duì)的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

mayaohua 2019-08-29 18:44 評(píng)論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個(gè)屬性為的父級(jí)元素中如設(shè)置這個(gè)父級(jí)元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 評(píng)論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個(gè)屬性為的父級(jí)元素中如設(shè)置這個(gè)父級(jí)元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 評(píng)論0 收藏0
CSS/CSS3 實(shí)現(xiàn) 居中（水平&垂直）

摘要：，水平居中行內(nèi)元素把行內(nèi)元素放在一個(gè)屬性塊元素中，然后設(shè)置父層元素屬性居中，水平居中塊狀元素設(shè)置外邊距，水平居中多個(gè)塊狀元素把塊狀元素屬性，然后設(shè)置父層元素屬性居中，水平居中多個(gè)塊狀元素布局實(shí)現(xiàn)把塊狀元素的父元素屬性和，如下設(shè)置， 1，水平居中：行內(nèi)元素把行內(nèi)元素放在一個(gè)屬性塊（display：block）元素中，然后設(shè)置父層元素屬性居中： .test { text-align:ce...

genedna 2019-08-02 15:27 評(píng)論0 收藏0