GitHub中文论坛

盒子垂直水平居中方法:
1、

.box{
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

2、使用定位垂直水平居中:负margin居中（传统方法）
子绝父相

.father{
  position:relative;
  width:300px;
  height:300px;
}
.son{
  position: absolute;
  width:100px;
  height:100px;
  left:50%;
  top:50%
  margin-left: -50%;
  margin-top: -50%;
}

3.transform居中方法

.box {
  width: 100px;
  height: 100px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

个人觉得比较好用的垂直居中方法,还是定位和transform粗体字

@yangboha 学到了