摘要：經(jīng)常在寫代碼的時(shí)候碰到垂直居中的問(wèn)題，我一般用的多的是絕對(duì)定位加負(fù)的或者來(lái)實(shí)現(xiàn)居中。但是因?yàn)樗泄潭ǜ叨?，其?shí)并不能和上下都間距為，因此會(huì)使它居中。子清除浮動(dòng)，并顯示在中間。

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

說(shuō)明部分

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

正文開始

    
子div居中

這個(gè)方法使用絕對(duì)定位的 div，把它的 top 設(shè)置為 50％，margin-top 設(shè)置為負(fù)的 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;
}    

這個(gè)方法使用了一個(gè) position:absolute，有固定寬度和高度的 div。這個(gè) div 被設(shè)置為 top:0; bottom:0。但是因?yàn)樗泄潭ǜ叨?，其?shí)并不能和上下都間距為 0，因此 margin:auto 會(huì)使它居中。

#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;
}

這種方法，在子div外插入一個(gè)div。設(shè)置此 div height:50%; margin-bottom為負(fù)的子div的height。子div清除浮動(dòng)，并顯示在中間。

更改上面的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;
}

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

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

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

先將元素定位到容器的中心位置，然后使用 transform 的 translate 屬性，將元素的中心和父容器的中心重合，從而實(shí)現(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 有一個(gè)缺陷，就是當(dāng)計(jì)算結(jié)果含有小數(shù)時(shí)（比如 0.5），會(huì)讓整個(gè)元素看起來(lái)是模糊的，一種解決方案就是為父級(jí)元素設(shè)置 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%);
}

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

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

前端初學(xué)者用作整理知識(shí)之用，錯(cuò)誤之處請(qǐng)指正