使用display:flex和align-items:center垂直对齐div引发意外偏移

这是预期行为吗？ #

是的，这是inline-block元素的默认排版规则导致的。inline-block元素默认的vertical-align属性值为baseline（基线对齐），第一个包含flex布局的子元素，其内部布局改变了自身的基线位置，第二个inline-block元素会自动对齐这个偏移后的基线，最终出现顶部偏移的视觉效果。

修复方案 #

方法1：设置vertical-align: top #

给两个inline-block子元素添加vertical-align: top样式，强制它们顶部对齐：

<div style="width: 100%; height: 100%; display: block;">
    <div style="border: 1px solid blue; margin-right: 15px; display: inline-block; vertical-align: top;">
        <h3>Centered</h3>
        <div style="background: rgba(0, 0, 0, 0.3); width: 150px; height: 100px; display: block;">
            <div style="display: flex; align-items: center; width: 100%; height: 100%;">
                <h4 style="display: block;">First block</h4>
            </div>
        </div>
    </div>
    <div style="border: 1px solid green; margin-right: 10px; display: inline-block; vertical-align: top;">
        <h3>Default</h3>
        <div style="background: rgba(0, 0, 0, 0.3); width: 150px; height: 100px; display: block;">
            <h4 style="display: block;">Second block</h4>
        </div>
    </div>
</div>

方法2：改用Flex布局父容器 #

直接把根容器改成display: flex，子元素默认会沿顶部对齐，无需依赖inline-block：

<div style="width: 100%; height: 100%; display: flex;">
    <div style="border: 1px solid blue; margin-right: 15px;">
        <h3>Centered</h3>
        <div style="background: rgba(0, 0, 0, 0.3); width: 150px; height: 100px; display: block;">
            <div style="display: flex; align-items: center; width: 100%; height: 100%;">
                <h4 style="display: block;">First block</h4>
            </div>
        </div>
    </div>
    <div style="border: 1px solid green; margin-right: 10px;">
        <h3>Default</h3>
        <div style="background: rgba(0, 0, 0, 0.3); width: 150px; height: 100px; display: block;">
            <h4 style="display: block;">Second block</h4>
        </div>
    </div>
</div>

方法3：使用浮动（不推荐，需处理清除浮动） #

给两个子元素添加float: left，但需要额外处理父容器的浮动塌陷问题，不如前两种方法简洁：

<div style="width: 100%; height: 100%; display: block; overflow: hidden;">
    <div style="border: 1px solid blue; margin-right: 15px; display: block; float: left;">
        <h3>Centered</h3>
        <div style="background: rgba(0, 0, 0, 0.3); width: 150px; height: 100px; display: block;">
            <div style="display: flex; align-items: center; width: 100%; height: 100%;">
                <h4 style="display: block;">First block</h4>
            </div>
        </div>
    </div>
    <div style="border: 1px solid green; margin-right: 10px; display: block; float: left;">
        <h3>Default</h3>
        <div style="background: rgba(0, 0, 0, 0.3); width: 150px; height: 100px; display: block;">
            <h4 style="display: block;">Second block</h4>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Cels