css居中總結

通用方法

寬度高度都可以不確定
1.flex（IE10+）

.son{
    display: flex;
    justify-content: center;
    align-items: center;
 }

2.transform

.container{
    position:relative;
 }
 .son{
    position: absolute ;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

需要寬度高度已知

3.絕對定位

.container{
    position:absolute;
}
.son {
    position: absolute;
    left:50%;
    top:50%;
    width:寬度;
    height:高度;
    margin-left:—（寬度一半）;
    margin-top:—（高度一半）;
}

水平居中

1.margin:0 auto（寬度確定,塊級元素）

.son{
    width:200px;
    margin:0 auto;
}

2.text-align:center（行內元素）

垂直居中

1.line-height=父元素高度（單行文本）
2.table（高度不確定）

.container{
    display:table;
}
.son{
    display:table-cell;
    vertical-align:middle;
}

3.高度確定

.container{
    position:relative;
}
.son{
    position:absolute;
    top:0;
    bottom:0;
    height:高度;
    margin:auto 0;
}

4.設置一個空元素

.son{
    vertical-align:middle;
}
p{
    font-size:0;
    vertical-align:middle;
    display:inline-block;
}