css中居中詳解

說到布局除了浮動以及定位外還有乙個不得不提的點，那就是居中，居中問題我們在網頁布局當中經常遇到，那麼以下就是分為兩部分來講，一部分是傳統的居中，另一種則是flex居中，每個部分又通過分為水平垂直居中來講。

1.1水平居中

1.1.1 inline

對於inline元素以及純文字只需要為父元素設定text-align: center;適用於 inline, inline-block, inline-table, inline-flex

1.1.2 block

對於block元素則需要為想要居中的block設定margin: 0 auto;

1.1.3 more-block：

多個塊級元素直接居中同單個塊級居中一樣，但是如果要在單行內居中，需要先通過display: inline-block將塊級元素轉化為行內塊元素再按照行內元素為父元素新增text-align: center的居中方式居中。

1.2垂直居中

1.2.1 inline

單**況下,可以為父元素設定相同的上下padding實現居中

如果只是單行文字也可以設定行高等于父元素高度實現居中

如果設定上下相同padding沒有用的話，可能該元素是**，可以使用vertical-align: middle設定對齊基線為middle實現居中。

1.2.2 block

要居中的元素高度固定的情況下，可以使用position來定位，設定top為50%，但是因為top是盒子上邊界的定位距離，所以還要通過負值的margin-top往回拉寬度的一半。

(以下只寫核心**，其他寬度高度border自己加)

.parent .child

但是如果高度不固定的話則可使用變換來替換margin負值達到動態高度的一半

// 只需要替換上面的margin-top
: -50px; height可以直接去掉了
transform
:translatey
(-50%)
;

1.3水平垂直都居中

1.3.1 固定寬高

固定寬高下，同垂直居中方法一樣，也是絕對定位50%然後通過margin負值拉回去

.parent .child

此為還有一種方法也可以實現已知寬高時候的居中

// 此處如果是不定寬高的話就會child鋪滿整個父元素 .child

1.3.2 不固定寬高

// 同樣是替換margin負值
transform
:translate
(-50%, -50%)
;

flex的出現解決了傳統居中方式難以實現的麻煩，僅需要幾行**就可以實現居中，flex布局不僅能用於居中，在其他布局當中也相當的有效。想要啟動flex只要在父元素設定display： flex,內聯元素的話則是display: inline-flex.

2.1 水平居中

.parent

2.2 垂直居中

.parent

2.3 水平垂直居中

.parent

此外，如果想要實現豎著排列flex實現也很容易，僅需要換一下主軸方向，多新增一行就行了。

.parent

css中 居中詳解