CSS实现垂直/水平居中

前端开发中经常用到水平/垂直居中，现总结如下。

//html
<div class="box">
    <div class="content">this is content</div>
</div>
//css 
.box {
    width: 600px;
    height: 400px;
    border: 1px solid red;
    }
    .content {
    width: 100px;
    height: 60px;
    border: 1px solid #000;
}

水平居中

1. 子元素添加margin: 0 auto;
.content{
    margin: 0 auto;  //这也是最常用的一种方法
}
2. 利用css3的平移
.content{
    margin-left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%)
}
3. flex布局
.box{
    display: flex;
    justify-content: center;
    //相信随着flex布局越来越主流 这种布局方式会被更多的使用,目前IE浏览器仍然是最大的障碍
}

垂直居中

关于垂直居中并没有水平居中那么容易实现，刚入门的小伙伴可能会体会更深，网上也有很多在已知父子元素高度的情况下利用定位或者margin或者计算属性实现的例子，但实际开发过程中更多的是不能确定父子元素的高度或者它们的高度是动态的，这就需要一些更通用的方法：

1. 绝对定位+css3平移
.box{
    position: relative;
}
.content{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}
    
2. flex布局
.box{
    display: flex;
    align-items: center;
}