css中一個很重要的問題，就是關于元素的居中，包括水平居中，垂直居中，本文就是為大家總結了：css中對于行內元素與塊級元素不同的居中方法.

一、行內元素

水平居中：

垂直居中：

1. 單行文本

height 與line-height 的高度相同時，可以實現(xiàn)垂直居中

2. 多行文本

方法1：

注：vertical-align 作用單元格時，才生效，所以一般會結合dispaly:table-cell;

?一起使用才有效果

示例：

方法2：

樣式重點分析：

1. 父級的標簽，高度和行高一致

p{

???height: 200px;

? ?line-height: 200px;

? border: 1px solid red;

? ?font-size: 16px;

}

2. 子標簽, 設置為行內塊級元素，垂直居中，且單獨設置行高

注：line-hight:1 ;?這里的1指與父級的字體大小相同，你可以可以直接寫具體的px

p span{

? ? ???display: inline-block;

? ? ? ?line-height: 1;

}

二、塊級元素

1. 水平居中

方法1：常規(guī)方法 -?定寬元素

此方法缺點：內層元素必須設定（固定）寬度

方法2：不定寬元素 - 絕對定位

思路：

1.外層絕對定位，內層相對定位，外層的外層相對定位?

2.外層左浮動，內層左浮動

3.外層右移50%，內層左移50%

此方法有l(wèi)eft:50%, 在margin-left:負的寬度的一半，只是寬度不確定，所以就采用了position:relative; , right:50%; 而right：50%，其實就是向左移動寬度的一半，這里的百分比是以父級的寬度計算的

2. 垂直居中

方法1：

設置父元素相對定位，子元素position: absolute;top: 50%;同時margin-top值為-(子元素高度的一半)，因為設置top值時是相對于盒子頂部，所以想要居中還要往上移動半個盒子的高度才能實現(xiàn)。IE版本都可以兼容

代碼如下：

方法2：

和上一種方法原理差不多，都是利用相對定位和絕對定位，有點不同是子元素內加上了transform:translateY(-50%);

方法3：

設置父元素為相對定位，子元素為絕對定位，同時設置子元素的top,bottom,left,right值為0，最后設置margin:auto;這能實現(xiàn)塊元素的垂直+水平居中，看代碼：

總結

還可以通過flex來實現(xiàn)，水平居中和垂直，因為比較簡單本文就沒有介紹.

參考文章：

https://www.cnblogs.com/goloving/p/7657544.html

https://blog.csdn.net/zhang_yu_ling/article/details/90272623

https://blog.csdn.net/Simon9124/article/details/78935788

茍有恒 , 何必三更眠五更起

關注我，一起學習吧?