CSS水平居中、垂直居中、水平垂直居中方法總結(jié)

文字的水平居中:

text-align:center;

單行文字的垂直居中：

line-height:30px;
height:30px;

讓有寬度的div水平居中：

margin: 0 auto;
width:300px;//必須要有寬度，margin:0 auto才能讓它居中

讓絕對(duì)定位的div垂直居中：

position:absolute;
top:0;
bottom:0;
margin:auto 0;  //垂直方向的auto 發(fā)揮的作用
width:300px;
height:300px;

同理，讓絕對(duì)定位的div水平和垂直方向都居中：

position:absolute;
top:0;
left: 0;
right:0;
bottom:0;
margin:auto; 
width:300px;
height:300px;

已知寬高的容器的水平垂直方向居中：

width: 300px;
height:300px;
position: absolute;
top:50%;
left:50%;
margin-top: -150px; //自身高度的一半
margin-left:-150px;

未知寬高的容器的水平垂直方向居中：

width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

*注：transform屬性，低版本瀏覽器不兼容，例如IE8, Android 4.4.2.
移動(dòng)端可以加入-webkit等前綴解決。
*注：transform屬性對(duì)position:fixed子元素有影響，遇到這個(gè)問題的是pc： chrome 版本：59.0.3071.115

水平垂直居中記得要想到flexbox:

.container{
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .div{
//whatever
}

此時(shí).div無論是否已知寬高，都能兩個(gè)方向居中。

垂直居中（表格布局法）

.container{
  display: table;
}
.container .div{
  display: table-cell;
  vertical-align:middle;
}

為什么height=line-height就能垂直居中？

拜讀了張?chǎng)涡翊笊竦奈恼拢?/p>

• 行高指的是什么？
  行高指的是文本行的基線間的距離。

• 什么是基線？
  基線不是文字的下端沿。是英文字母X的下端沿。
  文字有頂線，底線，基線和中線，用以確定文字行的位置。

• 什么是行距？
  行高與字體尺寸之間的差。

• 還要理解一個(gè)概念 -- 行內(nèi)框
  行內(nèi)元素會(huì)生成一個(gè)行內(nèi)框。它無法顯示出來，但是又確實(shí)存在。
  在沒有其他因素影響的時(shí)候，行內(nèi)框等于內(nèi)容區(qū)域。

  設(shè)定行高可以增加或者減少行內(nèi)框的高度，即：將行距的值（行高-字體尺寸）除以2，分別加到內(nèi)容區(qū)域的上下兩邊。這是理解的關(guān)鍵，也就是內(nèi)容區(qū)域的上面和下面均等增加一個(gè)距離。可以在一段文字上進(jìn)行調(diào)試看看，發(fā)現(xiàn)增加減小line-height時(shí)，文字是整體上下縮進(jìn)的，而非第一行不動(dòng)，后面的向上靠攏。

  行內(nèi)框具有垂直居中性。即行內(nèi)框占據(jù)的空間按與文字內(nèi)容公用水平中垂線。（張?chǎng)涡瘢?/p>

關(guān)于vertical-align:middle屬性，也很神奇，可以好好再拜讀下大神的文章。