垂直水平居中

行内元素居中

text-align :center;

块状元素居中

margin:0 auto;

多个块状元素的水平居中

.container{
text-align:center
}
.center{
display:inline-block;
}

使用flexbox实现多个块状元素的水平居中

.container{
display:flex;
justify-content:center;
align-item:center
}

已知高度宽度元素的水平垂直居中

1 绝对定位与负边距

.container{
position:relative;
}
.center{
height :100px;
width:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px
}

2 绝对定位与margin

不需要知道宽高

.container{
position:relative;
}
.center{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto
}

未知高度和宽度元素的水平垂直居中

1 当要被居中的元素是inline或者inline-block元素

.container{
text-align :center;
vertical-align:center;
}

2 transform:translate(-50%,-50%)

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