水平居中

?

行內(nèi)元素的水平居中

text-align:center（在父元素中設(shè)置）

只對內(nèi)聯(lián)元素或行內(nèi)塊元素有效

需要放置于父元素中

?

塊級元素的水平居中

margin: 0 auto;

只對塊級元素有效

auto指的是自適應(yīng)寬度。實質(zhì)就是均分了元素左右的剩余空間，所以元素會居中。

auto只有在塊級元素設(shè)置了寬度width才有效(塊級元素不設(shè)寬度默認就占整行了，所以是廢話)

auto無法實現(xiàn)塊級元素的垂直居中，原因與CSS默認的高度計算規(guī)則有關(guān)，這里暫不深究。但margin:auto可以實現(xiàn)絕對定位元素的水平垂直居中，見下文。

?

垂直居中

?

行內(nèi)元素的垂直居中

line-height: 父元素的高度;（在父元素中設(shè)置）

只對內(nèi)聯(lián)元素或行內(nèi)塊元素有效

需要知道父元素的高度

需要放置于父元素中

適用于垂直方向上只有一個需要居中的元素的情況（想同時垂直居中多個元素時，可以用padding）

vertical-align: middle;（用于垂直對齊inline元素）

只對內(nèi)聯(lián)元素或行內(nèi)塊元素有效

主要用在文本和與文本相鄰元素的垂直方向上的對齊問題（主要是對齊的作用，而不是居中的作用），

例如將一個icon與文字對齊。

使用vertical-align需要了解文字的baseline和line-box等知識

水平垂直居中

浮動元素

使用position:relative;

具體方法與絕對定位的第1個和第2個方法類似，只不過把absolute改為relative，并根據(jù)原float的方向稍作修改即可。

相對定位relative可以和float疊加，在float后的位置上再相對定位。

缺點就是float元素居中后仍會占據(jù)原來的位置。

第二種方式中，如果設(shè)定了浮動元素的高度，將會影響transform的具體值。

絕對定位元素

使用50%推進法則

position: absolute;
left: 50%;
top: 50%;

margin-left: -該元素自身寬度的一半px; ? ? ?/*水平居中*/
margin-top: -該元素自身高度的一半px; ? ? ?/*垂直居中*/

只對絕對定位的元素有效

需要知道絕對定位元素的寬高

兼容性很好，是一種主流用法

第一種方法的改進版，使用transform代替margin

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); ?/*水平垂直居中*/

不需要知道絕對定位元素的寬高。（如果設(shè)置了高度，則有可能影響到transform的具體值）

兼容性一般，IE10+以及其他現(xiàn)代瀏覽器支持

使用margin:auto;

position: absolute;
left: 0;
right: 0; ? ? ? ? ? /*水平居中*/
top: 0;
bottom: 0; ? ? ? ? ?/*垂直居中*/
margin: auto;

只對絕對定位的元素有效

不必知道寬高，但需要是圖片這種自身包含尺寸的元素

left與right必須配對出現(xiàn)，top與bottom必須配對出現(xiàn)

目前支持IE9+，及其他瀏覽器。

flex居中方式

display: flex;
justify-content: center; ?/*水平居中*/
align-items: center; ? ? ?/*垂直居中*/

塊級元素設(shè)置display: flex;,內(nèi)聯(lián)元素設(shè)置display: inline-flex;。

需要注意的幾個問題

元素浮動后仍可以設(shè)置margin屬性，但auto不會起作用。

?

圖片居中的問題

注意：如果圖片的寬度大于父元素的寬度, 不能使用margin: 0 auto;或者text-align: center;讓圖片居中

如果圖片的寬度大于父元素的寬度, 可以絕對定位中的居中方式讓圖片居中。但是定位流的弊端也比較明顯。它必須知道圖片寬度。

如果圖片的寬度大于父元素的寬度, 也可以使用margin: 0 -100%;

注意: 父元素必須設(shè)置text-align: center;