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

博客原文地址：Claiyre的我的博客 https://claiyre.github.io/
如需轉載，請在文章開頭註明原文地址
不爲繁華易匠心

從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。
css居中分爲水平居中和垂直居中，水平居中方式也較爲常見和統一，垂直居中的方法就千奇百怪了。本文是我積累的若干css居中的方法，前後討論了塊級元素的和行內元素的垂直居中和水平居中，特此記錄下來與你們分享。若有敘述不當的地方，還望指出。o(￣▽￣)ブ
<!--more-->

---

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

水平居中

1. 行內元素的水平居中

直接設置其父元素

.ourter{
text-align: center;
}

無論有幾個行內元素，一行代碼便可搞定，so easy~

2. 塊級元素的水平居中

也很是簡單吶
設置該塊級元素

div{
margin: 0 auto;                                                  
}

可是！可是！若是該元素的position爲absolute的話，該方法會失效。
我是這樣理解的：margin爲auto即至關於外邊距的值是自動的，相對的，因此在絕對定位下將失效。不過仍是能夠將其margin設爲具體數值滴。

垂直居中

有不少關於垂直居中tricks,博主在這裏只介紹一些比較簡單經常使用的
若是對高度沒有要求的哈

1. 行內元素的垂直居中

1）若是對父元素的高度沒有具體的要求的話，將父元素的padding-top padding-bottom設置爲相同的值便可。

.outer{
padding-top: 60px;
padidng-bottom: 60px;                                                       
width：300px;
height: auto; /*注意：此時父元素的height不能是具體數值*/
}

2）若是要求父元素的高度爲具體數值時，且確保行內元素不會換行時，能夠設置line-height等於父元素的高度

.outer{
width: 300px;
height: 200px;
line-height: 200px;                                                  
/*text-align: center; */                                    
}

此時，便可實現行內元素的垂直居中。若把最後一行加上，便可同時實現水平和垂直居中。
可是！！！必定要確保不會換行，也就是隻有一行。
3）在保持父元素具體數值寬度不變且有不止一行時，可使用一點小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是指行內元素的基線相對於該元素所在行的基線的垂直對齊方式，因此該方法只對行內元素有效
效果：

2. 塊級元素的垂直居中

1）若是已知子元素的高度，能夠這樣

.outer{
position: relative;                                                       
}
.inner{
height：50px;
width:50px;
position: absolute;
top: 50%;
margin-top: -25px;  /*該元素高度的一半*/                                  
}

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

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

.outer{
position: relative;                                                         
}
.inner{
width:50px;
position: absolute;
top: 50%;
transform: translateY(-50%);                                                    
}

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

這時咱們能夠用一個div把全部子元素包裹起來，變成一個子元素，而後就能夠繼續使用上面的方法了。

最最後！上面的全部方法都是在不使用flex的前提下的才使用的！解決居中問題最爽的固然是flex佈局啦，O(∩_∩)O~~
什麼？！還不會使用flex佈局？趕忙點下面~

flex佈局學習總結
使用flex，管它是行內元素仍是塊級元素，管它有幾個元素，通通搞定！
舉個栗子！
實現多個塊級元素的垂直加水平居中

.outer{
display: flex;
justify-content: center;                                                              
align-items: center;
flex: 0 0 auto;
/* flex-direction: column;  */
}

效果圖以下:

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

是否是很簡便膩~O(∩_∩)O哈！