CSS水平垂直居中

行内元素水平居中

text-align:center；

父元素高度确定的单行文本设置垂直居中

height = line-height；

垂直水平都居中

//html

   
Hello

//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怎么实现垂直居中