CSS垂直居中，水平居中

如何進行CSS垂直居中是開發中常常遇到的問題。

通常來講有以下的解決方案。

例如以下的html，須要將.box內部的img進行垂直居中。

<div class='box'>
        <img class='img' />
    </div>    

 

1. 使用inline-block佈局，

.box {
    width: 200px;
    height: 200px;
    border: 1px solid black;                    
    text-align: center;
}
.box:before {
    content: '';
    vertical-align: middle;
    height: 100%;
    display: inline-block;
}
.img {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
}    

須要在頁面上加入:before僞元素， 以及將內部的元素調整成inline-block。只要對這兩個屬性支持的瀏覽器均可以支持。

2. 能夠使用absulote佈局進行定位， 利用margin消除子元素高度和寬度的影響。

.box {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    position: relative;
}

.img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
}

須要將父節點改爲relative佈局， 並且子節點須要定高定寬。

3. 相似的，也能夠使用relative進行佈局，須要注意的是，內部的img須要標註成display: block。通過實測，firefox對img的默認display爲inline。

.box {
    width: 200px;
    height: 200px;
    border: 1px solid black;        
}

.img {
    position: relative;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;            
    background-color: green;
    width: 50px;
    height: 50px;
    display: block;
}     

一樣的缺點是，須要內部元素定高定寬。

4. 能夠使用transform來進行定位。

.box {
    width: 200px;
    height: 200px;
    border: 1px solid black;            
}

.img {
    display: block;
    height: 50px;
    margin: 50% 0 0 50%;
    transform: translate(-50%, -50%);
    width: 50px;
}

惟一的缺點是須要對transform的支持。 IE對此屬性的支持是IE9.

5. 使用flex佈局

 使用flex-flow: row; align-items: center將其豎直居中。使用margin令其水平居中。

.box {
    width: 200px;
    height: 200px;
    border: 1px solid black;   
    display: flex;
    flex-flow: row;
    align-items: center;
}

.img {            
    height: 50px;
    width: 50px;            
    margin: 0 auto;
}        

也能夠簡單的使用margin: auto.

.box {
    width: 200px;
    height: 200px;
    border: 1px solid black;   
    display: flex;
}

.img {            
    height: 50px;
    width: 50px;            
    margin: auto;
}        

 須要對display: flex的支持。