CSS水平垂直居中總結

CSS水平居中、垂直居中、水平垂直居中方法總結

文字的水平居中:

text-align:center;

單行文字的垂直居中：

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

讓有寬度的div水平居中：

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

讓絕對定位的div垂直居中：

position:absolute;
top:0;
bottom:0;
margin:auto 0;  //垂直方向的auto 發揮的做用
width:300px;
height:300px;

同理，讓絕對定位的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

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

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

此時.div不管是否已知寬高，都能兩個方向居中。

垂直居中（表格佈局法）

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

爲何height=line-height就能垂直居中？

拜讀了張鑫旭大神的文章：

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

• 什麼是基線？
  基線不是文字的下端沿。是英文字母X的下端沿。

文字有頂線，底線，基線和中線，用以肯定文字行的位置。

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

• 還要理解一個概念 -- 行內框
       行內元素會生成一個行內框。它沒法顯示出來，可是又確實存在。

     在沒有其餘因素影響的時候，行內框等於內容區域。
    > 設定行高能夠增長或者減小行內框的高度，即：將行距的值（行高-字體尺寸）除以2，分別加到內容區域的上下兩邊。這是理解的關鍵，也就是內容區域的上面和下面均等增長一個距離。能夠在一段文字上進行調試看看，發現增長減少line-height時，文字是總體上下縮進的，而非第一行不動，後面的向上靠攏。

行內框具備垂直居中性。即行內框佔據的空間按與文字內容公用水平中垂線。（張鑫旭）

關於vertical-align:middle屬性，也很神奇，能夠好好再拜讀下大神的文章。