css的實現(xiàn)元素垂直居中

warmcheng 發(fā)布于2019-08-28 18:31 / 2941人閱讀

摘要：經(jīng)常在寫代碼的時候碰到垂直居中的問題，我一般用的多的是絕對定位加負的或者來實現(xiàn)居中。但是因為它有固定高度，其實并不能和上下都間距為，因此會使它居中。子清除浮動，并顯示在中間。

經(jīng)常在寫代碼的時候碰到垂直居中的問題，我一般用的多的是絕對定位加負的margin或者display: table來實現(xiàn)居中。但是實際項目中，常常有一些特殊的情況，讓上述方法使用起來并不是那么的靠譜。因此，更多行之有效的方法就顯得尤為重要了。

說明部分

本文不考慮瀏覽器的兼容問題，僅僅是提供一些方法供參考，實際開發(fā)時請根據(jù)實際情況選擇。特別是在現(xiàn)在流行的響應式頁面中，高度不固定的情況下，可能部分效果不適合使用。能力有限，更多方法請聯(lián)系我后期添加。

正文開始

為了方便下文說明，我們先統(tǒng)一html為：


    子div居中

1. 子元素有高度的情況 1.1 絕對定位和負的margin:

這個方法使用絕對定位的 div，把它的 top 設置為 50％，margin-top 設置為負的 div 高度的一半。

#parent {
    position: relative;
    width: 600px;
    height: 600px;
    background-color: #ccc;
}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
    background-color: #fff;
}

1.2 絕對定位和margin:auto：

這個方法使用了一個 position:absolute，有固定寬度和高度的 div。這個 div 被設置為 top:0; bottom:0。但是因為它有固定高度，其實并不能和上下都間距為 0，因此 margin:auto 會使它居中。

#parent {
    position: relative;
    width: 600px;
    height: 600px;
    background-color:#ccc;
}
#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width:100px;
    height:100px;
    background-color: #fff;
}

1.3 清除浮動:

這種方法，在子div外插入一個div。設置此 div height:50%; margin-bottom為負的子div的height。子div清除浮動，并顯示在中間。

更改上面的html為下面的:


      
    子div居中

css為:

#parent{ 
    width: 600px; 
    height: 600px;
    background-color: #ccc;
}
#floater {
    float: left;
    height: 50%;
    margin-bottom: -50px;
    background-color: #f00;
}
#child {
    clear: both;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: #fff;
}

2. 子元素自適應高度的情況 2.1 div 的顯示方式設置為表格：

父div 的顯示方式設置為表格，因此我們可以使用表格的 vertical-align

#parent {
    width:600px; 
    height:600px;
    display: table;
    background-color:#ccc;
}

#child {
    display: table-cell;
    vertical-align: middle;
    background-color:#0f0;
}

2.2 css3的transform 的 translate 屬性:

先將元素定位到容器的中心位置，然后使用 transform 的 translate 屬性，將元素的中心和父容器的中心重合，從而實現(xiàn)垂直居中

#parent {
      position: relative;
    width: 600px;
    height:600px;
    overflow: hidden;
    background-color:#ccc;
}

#child{
    position: absolute;
    top: 50%;
    background-color: #0f0;
    transform: translateY(-50%);
}

使用 transform 有一個缺陷，就是當計算結果含有小數(shù)時（比如 0.5），會讓整個元素看起來是模糊的，一種解決方案就是為父級元素設置 transform-style: preserve-3d; 樣式：

#parent{
    -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
}

#child {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
}

2.3 flexbox

使用 flexbox 實現(xiàn)水平和垂直居中，只需使用兩條居中屬性即可

#parent{ 
    width:600px;
    height:600px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#eee;
}
#child {
    background-color: #0f0;
}

前端初學者用作整理知識之用，錯誤之處請指正

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

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

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

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

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

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

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

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

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

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

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

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

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

mayaohua 2019-08-29 18:44 評論0 收藏0
CSS/CSS3 實現(xiàn) 居中（水平&垂直）

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

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