css水平垂直居中

<div class = "content">
    <div class = "aaa">hahhahaha</div>
</div>

1、absolute,上下左右都是0;margin：auto; 父元素不固定宽高；居中元素固定宽高；兼容ie8+

.content {
    position: relative;
    background-color: #fff4b4;
    height: 200px;
}
.aaa {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
}

2、display: table-cell; 父元素固定宽高，居中元素不固定宽高；兼容ie8+

.content {
    position: relative;
    background-color: #fff4b4;
    height: 200px;
    width: 200px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.aaa {
    display: inline-block;
}

3、父元素不固定宽高；居中元素固定宽高；兼容所有浏览器；

.content {
    position: relative;
    background-color: #fff4b4;
    height: 200px;
}
.aaa {
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -50px; // 宽度的一半
    margin-top: -50px; // 高度的一半
    width: 100px;
    height: 100px;

}

4、还有display: flex,兼容性不好，只支持火狐和谷歌