如何让一个不定宽高的div垂直居中？

1.利用Flex布局，使得不定宽高的div垂直居中

<div class="father">
    <div class="children">
      <span>我是不定宽高div</span>
    </div>
  </div>

<style>
/* 父级div */
.father {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 1px solid red;
  /* flex布局 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
}
/* 不定宽高的div */
.children {
  border: 1px solid red;
}
</style>

效果如图：

---

 2.利用Css中的display:inline-block、display: table-sell、vertical-align:middle

<div class="father">
    <div class="children">
      <span>我是不定宽高div</span>
    </div>
  </div>

<style>
/* 父级div */
.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  /* display: table-cell一个很好的自适应布局，此时的margin没有意义 */
  /* display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签 */
  /* display：table-cell属性也会被float、position：absolute等属性破坏效果，应避免同时使用。 */
  display: table-cell;
  /* vertical-align 属性设置元素的垂直对齐方式。*/
  /* 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。 */
  /* 在表格中，这个属性会设置单元格内容的对齐方式。 */
  vertical-align: middle;
  text-align: center;
}
/* 不定宽高的div */
.children {
  border: 1px solid red;
  /* display:inline-block不设置宽度时,内容撑开宽度;不会独占一行,支持宽高,代码换行被解析成空格 */
  /* display:inline-block属性的元素既拥有了block元素可以设置width和height的特性,又保持了inline元素不换行的特性。 */
  display: inline-block;
  vertical-align: middle;
}
</style>

效果如图：

---

 3.利用定位方法，父级设置position： relative,子级设置position：absolute

  <div class="father">
    <div class="children">
      <span>定位我是不定宽高div</span>
    </div>
  </div>

<style>
/* 父级div */
.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  /* 相对定位 */
  position: relative;
  margin: 0 auto;
}
/* 不定宽高的div */
.children {
  border: 1px solid red;
  /* 绝对定位 */
  position: absolute;
  text-align: center;
  /* 横向网页的一半 */
  left: 50%;
  /* 纵向网页的一半 */
  top: 50%;
  /* 设置transform:translate(-50%, -50%),即沿X轴和Y轴均移动一半 */
  transform: translate(-50%, -50%);
}
</style>

效果如图：