前端4-1-7：HTML：＜parent＞＜child＞content＜/child＞＜/parent＞实现child内容垂直居中

【问题】假设HTML结构为<parent><child>content</child></parent>下列哪些做法可以实现child内容垂直居中？

假设HTML结构为<parent><child>content</child></parent>下列哪些做法可以实现child内容垂直居中？

A:
parent {
display: table;
}
child {
display: table-cell;
vertical-align: middle;
}

B:
parent {
display: flex;
align-items: center;
}

C:
parent {
position: relative;
}
child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

D:
parent:after {
content: '';
height: 100%;
vertical-align: middle;
width: 0;
}
child {
display: inline-block;
vertical-align: middle;
}

【解析】

A:把parent变成table，再把子元素变为table-cell，而vertical-align属性可以设置元素垂直对齐，前提条件：只能应用于内联元素以及display值为table-cell的元素。

B：弹性布局。align-items：center为设置子元素在侧轴方向上居中对齐，弹性布局默认主轴方向为row（即从左到右），侧轴就是就是column(从上到下）。

C：定位。父元素设置相对定位，子元素设置绝对定位，子元素的top值设置为50%（即父元素高度的50%），注意：此时是child元素的左上角（0,0），移到了parent元素的（0,parent高度的50%），而不是子元素的中心点移到了父元素垂直方向的中心点。因此子元素需要往上移动自身高度的50%，即transform：translateY（-50%）。

D：设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。打个比方：有两个行内元素a和b，a和b都是img，如果a加了vertical-align:middle样式，b的底部（基线）就会对齐a的中间位置；如果a和b都加了一个vertical-align:middle样式。那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了。

而伪元素的display属性默认值为inline，行内元素是无法设置宽高的，想要设置宽高需要将之设置为block或者inline-block。所以D有错误，应该将：after设置为inline-block才行。