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

mist14 發(fā)布于2019-08-30 13:13 / 1250人閱讀

摘要：垂直居中表格布局法為什么就能垂直居中拜讀了張鑫旭大神的文章行高指的是什么行高指的是文本行的基線間的距離。行內(nèi)框具有垂直居中性。

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

水平垂直居中記得要想到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就能垂直居中？

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

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

什么是基線？
基線不是文字的下端沿。是英文字母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)容公用水平中垂線。（張鑫旭）

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