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