宽高不定的div，垂直，水平居中

假设html结构

<div class="p">
    <div class="c"></div>
</div>

1、flex布局

.p {
  display: flex;
  justify-content: center;
  align-items: center;
}

2、grid布局

.p {
  display: grid;
}
.c {
  justify-self: center;
  align-self: center;
}

3、表格法

.p {
  display: table;
}
.c {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

子元素并不会被转换成内联元素

4、定位系列
4.1 css3 transform法

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

4.2 完全定位

.p {
  position: relative;
}
.c {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}