css實現垂直居中

raise_yang 發布于2019-04-23 13:16 / 1152人閱讀

摘要：結構垂直居中默認樣式結構該方法兼容，火狐，谷歌，并且是否有寬高都可以。兼容火狐谷歌參考布局左右居中上下居中絕對定位和負邊距該方法兼容，火狐，谷歌，必須有寬高。

html結構

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

默認css樣式結構

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

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

.box2{
    display:table-cell;      //此元素會作為一個表格單元格顯示（類似  和 ）
    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. 絕對定位和負邊距 ? ? ?該方法兼容IE8+，火狐，谷歌，content必須有寬高。

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

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

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

5. 絕對定位和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;}

參考網址：https://www.cnblogs.com/hutuzhu/p/4450850.html

GPU云服務器云服務器實現垂直居中垂直居中水平垂直居中文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1648.html

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

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

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

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

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

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

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

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

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

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

Simon 2019-08-01 18:31 評論0 收藏0
CSS/CSS3 實現居中（水平&垂直）

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

genedna 2019-08-02 15:27 評論0 收藏0