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>
效果如图：
