前言
元素的水平及垂直居中是在寫CSS樣式中最常遇到的問題之一奇钞。相信會CSS的同學(xué)肯定都有自己的解決方法，但是并不一定都能熟練運用匆篓，并且知道其中原理搁胆。下面筹误，我就將自己總結(jié)的實現(xiàn)方法分享給大家。
ps：重點是第四，疑惑在第三，第一撵摆、第二也較常用
為本文制作的demo：元素居中顯示
一、單行文本
這里的單行文本不僅是指單行顯示的文本以及行內(nèi)元素（設(shè)置了display: inline;的也是行內(nèi)元素）害晦，當(dāng)然這些元素也只有包含文本才有意義特铝，才能顯示出來。
/* 父元素*/
div {
text-align: center;//水平居中
light-height: heightValue;//垂直居中
}
注意：
- 這里的
heightValue指的是height屬性值壹瘟，即行高值 = 高度值鲫剿，才能實現(xiàn)垂直居中。 - 另外一種常見的就是不設(shè)置高度稻轨，直接用行高來撐起高度灵莲，這樣就不存在行高與高度一致的問題。
具體原因請參考文章：對文字和行高的理解
二殴俱、多行文本
這里的多行文本笆呆，實際上應(yīng)該說是不定行，這個方法能自適應(yīng)的居中粱挡。
/* 父元素*/
div {
text-align: center;
display: table-cell;
vertical-align: middle;
}
這里設(shè)置table-cell，創(chuàng)建類似表格單元的元素俄精，就可以使用vertical-align設(shè)置垂直對齊方式询筏。
注意：在一些文章中，我看到還需要設(shè)置其子元素的
vertical-align竖慧，但是在實踐中發(fā)現(xiàn)并不需要嫌套。與下面使用table-cell的方法有所區(qū)別
三、圖片
這里圖片泛指行內(nèi)塊元素
-
table-cell + vertical-align
/* 父元素*/
div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 子元素img*/
img{
vertical-align:middle;
}
- 這個方法與上面的有區(qū)分圾旨，子元素必須加上
vertical-align踱讨，否則不同大小的圖片顯示效果不一樣 - 不支持img的父元素浮動，因為這樣
display會自動變?yōu)?code>block砍的，所以當(dāng)多圖片顯示時需要再在外面嵌套一層標(biāo)簽痹筛，不方便
注意：在一些文章中，在父元素上還添加了
font-size的大小控制，在我的實踐中帚稠，不添加font-size可以實現(xiàn)效果谣旁。但是，當(dāng)font-size達(dá)到一定程度的時候滋早，會有影響榄审。
-
vertical-align + font-size
/* 父元素*/
div {
font-size:128px;
vertical-align: middle;
}
/* 子元素img*/
img{
vertical-align: middle;
}
font-size達(dá)到一定大小就會影響行內(nèi)元素的垂直位置，具體是什么原因不明確杆麸，但是感覺是跟vertical-align以及行高有關(guān)搁进。
注意：這個方法的原本是在父元素上加
display: inline-block;的，實踐發(fā)現(xiàn)并不需要昔头，只要里面的是行內(nèi)塊元素就可以了饼问。使用這個方法特別注意的是父元素font-size與子元素height的比例關(guān)系，因為不可控减细，所以不推薦使用匆瓜。
-
其他方法參照下面的塊元素實現(xiàn)
四、盒子
盒子主要指塊元素和行內(nèi)塊未蝌，下面分享的是布局中主要用到的驮吱。margin: 0 auto就不做介紹了。
1. position + 負(fù)margin
/* 父元素 */
.demo{
position: relative;
}
/* 子元素 */
.box{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* img高度的一半*/
margin-left: -50px;/* img寬度的一半*/
}
利用position移動父元素寬高的一半萧吠，再利用負(fù)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
這就是前面圖片提到的方法除破，只不過要設(shè)置子元素為display: inline-block;
4. flex
這才是真正的布局神器。適用于所有琼腔，但也需要靈活應(yīng)用瑰枫。
.demo {
display: flex;
align-items: center;
justify-content: center;
}
簡潔、高效丹莲，在低版本IE存在兼容問題光坝，但是現(xiàn)在幾乎不用考慮了。
詳細(xì)語法請查看我的博文：關(guān)于Flex布局
