CSS專題一探索居中

css的居中方式，有時候很好用，但大多數時候還是令人迷茫的，所以這個專題就專門歸納整理常用的居中方式，這樣以後寫起來就不用浪費時間去實驗。居中分為水平居中和垂直居中，下面會講居中方式以及用**驗證的結果。

測試**：

總結margin：0 auto：

這個是最令我疑惑的，起初以為它是對行內，以及行內塊有效，結果發現不是這樣。先測試p標籤，p標籤是塊級元素

文字測試

成功居中。測試img標籤，img標籤是行內元素

發現並沒有居中，這就奇怪了

把text-align放在父標籤中，居然居中了。

網路上找資料，發現text-align:center 是這樣定義的：

text-align屬性: 是用來設定塊級元素裡面內容的水平對齊方式

也就是說text-align屬性只能設定在塊級元素上, 用來控制塊級元素內部的內容(包括文字), 而不能直接在內容上(比如行內元素或者文字)上設定，對inline-block也有效，還有就是浮動情況下是不會居中的。

總結text-align：center

display: table; 設定**,可以成為行內利用**居中，而且文字是自適應長度的。然後設定margin：0 auto；居中

總結父元素設定position :relative; 子元素設定 position: absolute;然後設定left:-50%; margin-left: 一半寬；

設定display：flex ；justify-content：center；來實現居中

總結

- 用display: flex；價效比很高，遠比設定position 好 - 會覆蓋float/position的效果 - block/inline-block/inline都行

設定行高=寬高

總結

1. 設定行高居中（只對文字有效) 2. 要設定寬高麻煩，不能使用100%代替

利用**的方式來垂直居中(文字均有效),設定父元素為**，再設定子元素

.parent

.child總結：

利用2d變換，在水平和垂直兩個方向都向反向平移寬高的一半，從而使元素水平垂直居中。核心**：.parent .child

總結：4. flex布局

利用flex布局，其中justify-content 用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。

核心**：.parent

CSS專題一 探索居中