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的支持。