博客原文地址：Claiyre的個人博客 https://claiyre.github.io/
如需轉(zhuǎn)載，請在文章開頭注明原文地址
不為繁華易匠心
從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。
css居中分為水平居中和垂直居中，水平居中方式也較為常見和統(tǒng)一，垂直居中的方法就千奇百怪了。
本文以下代碼中 .outer是父元素的類名，.inner塊級代表子元素,span代表行內(nèi)子元素。
水平居中
1. 行內(nèi)元素的水平居中
直接設(shè)置其父元素
.ourter{
text-align: center;
}
不管有幾個行內(nèi)元素，一行代碼即可搞定，so easy~
2. 塊級元素的水平居中
也非常簡單吶
設(shè)置該塊級元素
div{
margin: 0 auto;
}
但是！但是！如果該元素的position為absolute的話，該方法會失效。
我是這樣理解的：margin為auto即相當(dāng)于外邊距的值是自動的，相對的，所以在絕對定位下將失效。不過還是可以將其margin設(shè)為具體數(shù)值滴。
垂直居中
有很多關(guān)于垂直居中tricks,博主在這里只介紹一些比較簡單常用的
如果對高度沒有要求的哈
1. 行內(nèi)元素的垂直居中
1）如果對父元素的高度沒有具體的要求的話，將父元素的padding-top padding-bottom設(shè)置為相同的值即可。
.outer{
padding-top: 60px;
padidng-bottom: 60px;
width：300px;
height: auto; /*注意：此時父元素的height不能是具體數(shù)值*/
}
2）如果要求父元素的高度為具體數(shù)值時，且確保行內(nèi)元素不會換行時，可以設(shè)置line-height等于父元素的高度
.outer{
width: 300px;
height: 200px;
line-height: 200px;
/*text-align: center; */
}
此時，即可實現(xiàn)行內(nèi)元素的垂直居中。若把最后一行加上，即可同時實現(xiàn)水平和垂直居中。
但是?。?！一定要確保不會換行，也就是只有一行。
3）在保持父元素具體數(shù)值寬度不變且有不止一行時，可以使用一點小tricks,比如
.outer{
text-align: center;
height: 200px;
width: 300px;
}
.outer::before{
content: " ";
height: 100%;
width: 1%;
display: inline-block;
vertical-align: middle;
}
/*html代碼如下*/
<div id="outer">
<span>span1</span>
<span>span2</span>
</div>
但是，注意：因為vertical-align是指行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊方式，所以該方法只對行內(nèi)元素有效
效果：
2. 塊級元素的垂直居中
1）如果已知子元素的高度，可以這樣
.outer{
position: relative;
}
.inner{
height：50px;
width:50px;
position: absolute;
top: 50%;
margin-top: -25px; /*該元素高度的一半*/
}
注意子元素和父元素的position，切記父元素的position是relative
2）如果不知道子元素的高度，可以利用css的transform屬性，對1）進(jìn)行小改動，如下：
.outer{
position: relative;
}
.inner{
width:50px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3）但以上兩種方式對于有多個塊級子元素的情況就不適用了，比如，這樣的情況
這時我們可以用一個div把所有子元素包裹起來，變成一個子元素，然后就可以繼續(xù)使用上面的方法了。
**最最后！上面的所有方法都是在不使用flex的前提下的才使用的！解決居中問題最爽的當(dāng)然是flex布局啦，O(∩_∩)O~~ **
什么？！還不會使用flex布局？趕緊點下面~
flex布局學(xué)習(xí)總結(jié)
使用flex，管它是行內(nèi)元素還是塊級元素，管它有幾個元素，統(tǒng)統(tǒng)搞定！
舉個栗子！
實現(xiàn)多個塊級元素的垂直加水平居中
.outer{
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
/* flex-direction: column; */
}
效果圖如下:
如果加上最后一行，則豎直排列子元素，即：
是不是很簡便膩~O(∩_∩)O哈！
