CSS水平居中和垂直居中的若干方法

從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。

css居中分為水平居中和垂直居中，水平居中方式也較為常見和統一，垂直居中的方法就千奇百怪了。本文是我積累的若干css居中的方法，先後討論了塊級元素的和行內元素的垂直居中和水平居中，特此記錄下來與大家分享。如有敘述不當的地方，還望指出。o(￣▽￣)ブ

本文以下**中 .outer是父元素的類名，.inner塊級代表子元素,span代表行內子元素。

直接設定其父元素

不管有幾個行內元素，一行**即可搞定，so easy~

也非常簡單吶

設定該塊級元素

但是！但是！如果該元素的position為absolute的話，該方法會失效。我是這樣理解的：margin為auto即相當於外邊距的值是自動的，相對的，所以在絕對定位下將失效。不過還是可以將其margin設為具體數值滴。

有很多關於垂直居中tricks,博主在這裡只介紹一些比較簡單常用的

如果對高度沒有要求的哈

1）如果對父元素的高度沒有具體的要求的話，將父元素的padding-top padding-bottom設定為相同的值即可。

.outer

2）如果要求父元素的高度為具體數值時，且確保行內元素不會換行時，可以設定line-height等於父元素的高度

.outer

此時，即可實現行內元素的垂直居中。若把最後一行加上，即可同時實現水平和垂直居中。

但是！！！一定要確保不會換行，也就是只有一行。

3）在保持父元素具體數值寬度不變且有不止一行時，可以使用一點小tricks,比如

.outer .outer::before /*html**如下*/ span1 span2

但是，注意：因為vertical-align是指行內元素的基線相對於該元素所在行的基線的垂直對齊方式，所以該方法只對行內元素有效

效果：

1）如果已知子元素的高度，可以這樣

.outer .inner

注意子元素和父元素的position，切記父元素的position是relative

2）如果不知道子元素的高度，可以利用css的transform屬性，對1）進行小改動，如下：

.outer .inner

3）但以上兩種方式對於有多個塊級子元素的情況就不適用了，比如，這樣的情況

這時我們可以用乙個div把所有子元素包裹起來，變成乙個子元素，然後就可以繼續使用上面的方法了。

最最後！上面的所有方法都是在不使用flex的前提下的才使用的！解決居中問題最爽的當然是flex布局啦，o(∩_∩)o~~

什麼？！還不會使用flex布局？趕緊點下面~

flex布局學習總結

使用flex，管它是行內元素還是塊級元素，管它有幾個元素，統統搞定！

舉個栗子！

實現多個塊級元素的垂直加水平居中

.outer

效果圖如下:

如果加上最後一行，則豎直排列子元素，即：

是不是很簡便膩~o(∩_∩)o哈！