CSS實現元素的居中顯示
前言
元素的水平及垂直居中是在寫CSS樣式中最常遇到的問題之一。相信會CSS的同學肯定都有自己的解決方法，但是並不一定都能熟練運用，並且知道其中原理。下面，我就將自己總結的實現方法分享給大家。
ps：重點是第四，疑惑在第三，第一、第二也較常用
為本文製作的demo：元素居中顯示
一、單行文字
這裡的單行文字不僅是指單行顯示的文字以及行內元素（設定了display: inline;的也是行內元素），當然這些元素也只有包含文字才有意義，才能顯示出來。
/* 父元素*/ div { text-align: center;//水平居中 light-height: heightValue;//垂直居中 }
注意：
- 這裡的
heightValue指的是height屬性值，即行高值 = 高度值，才能實現垂直居中。 - 另外一種常見的就是不設定高度，直接用行高來撐起高度，這樣就不存在行高與高度一致的問題。
二、多行文字
這裡的多行文字，實際上應該說是不定行，這個方法能自適應的居中。
/* 父元素*/
div {
text-align: center;
display: table-cell;
vertical-align: middle;
}
這裡設定table-cell，建立類似表格單元的元素，就可以使用vertical-align設定垂直對齊方式。
注意：在一些文章中，我看到還需要設定其子元素的
vertical-align，但是在實踐中發現並不需要。與下面使用table-cell的方法有所區別
三、圖片
這裡圖片泛指行內塊元素
-
table-cell + vertical-align
/* 父元素*/
div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 子元素img*/
img{
vertical-align:middle;
}
- 這個方法與上面的有區分，子元素必須加上
vertical-align，否則不同大小的圖片顯示效果不一樣 - 不支援img的父元素浮動，因為這樣
display會自動變為block，所以當多圖片顯示時需要再在外面巢狀一層標籤，不方便
注意：在一些文章中，在父元素上還添加了
font-size的大小控制，在我的實踐中，不新增font-size可以實現效果。但是，當font-size達到一定程度的時候，會有影響。
-
vertical-align + font-size
/* 父元素*/
div {
font-size:128px;
vertical-align: middle;
}
/* 子元素img*/
img{
vertical-align: middle;
}
font-size達到一定大小就會影響行內元素的垂直位置，具體是什麼原因不明確，但是感覺是跟vertical-align以及行高有關。
注意：這個方法的原本是在父元素上加
display: inline-block;的，實踐發現並不需要，只要裡面的是行內塊元素就可以了。使用這個方法特別注意的是父元素font-size與子元素height的比例關係，因為不可控，所以不推薦使用。
-
其他方法參照下面的塊元素實現
四、盒子
盒子主要指塊元素和行內塊，下面分享的是佈局中主要用到的。margin: 0 auto就不做介紹了。
1. position + 負margin
/* 父元素 */
.demo{
position: relative;
}
/* 子元素 */
.box{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* img高度的一半*/
margin-left: -50px;/* img寬度的一半*/
}
利用position移動父元素寬高的一半，再利用負margin往回移動子元素寬高的一半，剛好居中對齊。適合固定寬高的元素。
2.position + translate
/* 父元素 */
.demo{
position: relative;
}
/* 子元素 */
.box{
position: absolute;
top: 50%;
left: 50%;
transform:translate3d(-50%,-50%,0);
}
同上理，這裡利用translate3d往回移動。子元素不固定寬高也適用。
3. table-cell + vertical-align
這就是前面圖片提到的方法，只不過要設定子元素為display: inline-block;
4. flex
這才是真正的佈局神器。適用於所有，但也需要靈活應用。
.demo {
display: flex;
align-items: center;
justify-content: center;
}
簡潔、高效，在低版本IE存在相容問題，但是現在幾乎不用考慮了。
詳細語法請檢視我的博文：關於Flex佈局