平時整理的css水平垂直居中

掘金-css的垂直居中和水平居中總結

16種方法實現水平居中垂直居中

什麼是行內元素，塊級元素

inline element 也叫內聯元素、內嵌元素等；行內元素一般都是基於語義級(semantic)的基本元素，只能容納文字或其他內聯元素，常見內聯元素「a」。比如 span 元素，iframe元素和元素樣式的display : inline的都是行內元素。

複製**

margin 0 auto與text-align:center的區別

text-align:center設定為文字或img標籤等一些內聯物件（或與之類似的元素）的居中。margin:0 auto是設定塊元素（或與之類似的元素）的居中。

複製**

的水平居中

我們設定標籤img ，我們就犯了乙個小錯誤，img類於內聯物件，不可以設定img標籤的margin屬性，如果你一定想要設定，那麼首先要將它的屬性轉變為塊元素，如下面的**：

img

複製**

display: block;  /* 轉化成為塊級元素 */
magin: auto;
複製**

.element

複製**

上面的寫法需要嚴格知道盒子的寬高(侷限性)，所以有了下面的寫法(手機web開發可忽略,e10+以及其他現代瀏覽器才支援)

.element

複製**

總結下，margin:auto實現絕對定位元素的居中（水平垂直居中）

.element

複製**

.element

複製**

.element

複製**

.element

複製**

.parent ::after, .son .parent ::after

複製**

用flex布局的水平垂直居中特別方便，想要進一步了解flex彈性布局請參考flex 布局教程：語法篇和 flex 布局教程：例項篇

flex的居中

.element

複製**

align-items：center;(垂直)和justify-content：center;(水平)不是固定不變的，根據flex布局的主軸方向而定(預設水平方向)，主軸方向為垂直，原先的水平居中屬性會實現乙個垂直居中(注意點)。