行内元素水平居中
text-align:center；
父元素高度确定的单行文本设置垂直居中
height = line-height；
垂直水平都居中
//html
<div class="box">
<div class="content">Hello</div>
</div>
//css
.box{
display: table;
width: 300px;
height: 300px;
background:red;
}
.content{
display: table-cell;
vertical-align: middle;
text-align:center;
}
假设不知道元素宽度时，可以采用：
.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:red;
}
如果知道子元素的宽高，可以采用：
.content{
position:absolute;
top:50%;
left:50%;
margin-top:-height/2px;
margin-left:-width/2px;
}
灵活的Flex(推荐)
.box{
display:flex;
justify-content:center;
align-items:center;
}
比较复杂的一种,通过伪类设置:
.box{
position:absolute;
display:block;
background:rgba(0,0,0,.5);
}
.box:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.box:after{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
参考文章推荐：
CSS垂直居中和水平居中
史上最全Html和CSS布局技巧
css怎么实现垂直居中
