盒子垂直水平居中方法

方法一（position定位）

1. 父元素相对定位，子元素绝对定位。子元素4个方向都设为0,并加上margin:auto;

.demo{
  width: 500px;
  height: 400px;
  background: gainsboro;
  position: relative;
}

.demo-div{
  width: 100px;
  height: 100px;
  background: gray;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

        

方法二（定位+变换函数）

想要居中的元素未知宽高，内容由子元素撑开时

1. 父元素使用相对定位,子元素绝对定位
2. 需要居中的元素的左上角在父级元素的中心，再用平移函数translate向左向上平移本身宽高的一半

.demo{
  width: 300px;
  height: 200px;
  background: gainsboro;
  position: relative;
}
.demo-div{
  width: 100px;
  height: 80px;
  background: gray;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

方法三（弹性布局）

        给父元素设置弹性布局，设置主轴和交叉轴对齐方式为居中对齐

.demo{
  width: 300px;
  height: 200px;
  background: gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
}
.demo-div{
  width: 100px;
  height: 80px;
  background: gray;
}

方法四（表格元素）

display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置。

总结：

1. 不要与float：left; position:absolute; 一起使用
2. 可以实现大小不固定元素的垂直居
3. margin设置无效， 响应padding设置
4. 对高度和宽度高度敏感
5. 不要对display：table-cell使用百分比设置宽度和高度

引用：https://blog.csdn.net/MessageBox_/article/details/82380913

.demo{
  width: 300px;
  height: 200px;
  background: gainsboro;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.demo-div{
  width: 100px;
  height: 80px;
  background: gray;
  display: inline-block;
}

方法五（手动计算）

使用定位、margin、padding等元素手动计算子元素在父元素的垂直居中距离