问题概述
前端开发中经常遇到一个问题：如何使一个未知宽高的子元素垂直水平居中？
如图，图片的宽高未知，如何让图片在红框内垂直水平居中，源代码如下：
<style>
.outer {
width: 20%;
height: 200px;
border: 1px solid red;
}
.inner {
}
</style>
<div class="outer">
<div class="inner">
<img src="./11.png" alt="">
</div>
</div>
解决方案
以下四种方案可以实现需求：
1. 定位布局
让子元素相对于父元素偏移 50% ，再使用 transform 偏移自身的 50% ：
<style>
.outer {
width: 20%;
height: 200px;
border: 1px solid red;
position: relative;
}
.inner {
position: absolute;
top: 50%; /* 相对于父元素 */
left: 50%; /* 相对于父元素 */
transform: translate(-50%, -50%); /* 相对于本身 */
}
</style>
<div class="outer">
<div class="inner">
<img src="./11.png" alt="">
</div>
</div>
2. flex 布局
方案一，设置父元素为 flex 布局，再设置弹性容器的 justify-content align-items 属性将子元素水平垂直居中 ：
<!-- 方案一 -->
<style>
.outer {
width: 20%;
height: 200px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
}
</style>
<div class="outer">
<div class="inner">
<img src="./11.png" alt="">
</div>
</div>
方案二，同样是设置父元素为 flex 布局，再设置弹性容器子元素的 align-self 属性，对齐当前 flex 行中的元素，加上 margin: auto 自动计算子元素和父元素之间的边距，并设为居中 ：
<!-- 方案二 -->
<style>
.outer {
width: 20%;
height: 200px;
border: 1px solid red;
display: flex;
}
.inner {
align-self: center;
margin: auto;
}
</style>
<div class="outer">
<div class="inner">
<img src="./11.png" alt="">
</div>
</div>
3. vertical-align: middle;
先设置父元素的 text-align 属性垂直居中，再设置父元素的伪元素为行内元素，设置行内元素的 vertical-align 属性水平居中，子元素也同样需要设置 vertical-align ：
<style>
.outer {
width: 20%;
height: 200px;
border: 1px solid red;
text-align: center;
}
.outer::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.inner {
display: inline-block;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="inner">
<img src="./11.png" alt="">
</div>
</div>
4. display: table;
设置父元素为 table 布局，text-align 将子元素垂直居中，再设置子元素为表格单元格，利用表格单元格 vertical-align 属性水平居中 ：
<style>
.outer {
width: 20%;
height: 200px;
border: 1px solid red;
display: table;
text-align: center;
}
.inner {
display: table-cell;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="inner">
<img src="./11.png" alt="">
</div>
</div>
以上几种方法都可以实现子元素垂直水平居中，根据实际情况选择不同的方法。
