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

客官°小女子只卖身不卖艺 2022-11-15 14:21 127阅读 0赞

**【问题】假设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才行。