为何自定义元素无法像div一样在flex容器中垂直居中？

编辑说明 #

• 此前<div>能垂直居中是意外情况，实际是高度问题：<div>占满了父元素全部高度，但自定义元素的子元素并未如此。
• 此问题并非重复问题。

问题详情 #

我使用以下CSS代码：

.layout-main {
  display: flex;
  flex-direction: column;
}

当使用普通<div>作为子元素时：

<div class="layout-main">
  <div> 内容放置于此 </div>
</div>

其中的“内容”会垂直居中。

但改用自定义元素<my-element>包裹内容后：

<div class="layout-main">
  <my-element>
    <div> 内容放置于此 </div>
  </my-element>
</div>

其中的“内容”不会垂直居中。

目前找到两个解决办法：

• 为.layout-main显式设置justify-content: center；
• 为<my-element>设置display: contents。

我的疑问：为何自定义元素无法像<div>一样在display: flex; flex-direction: column的父容器中让内部内容垂直居中？

核心原因是自定义元素和普通<div>的默认盒模型行为存在差异：

1. 普通<div>默认display值为block，在垂直方向的flex容器中，block元素会自动拉伸填满父容器的可用高度。之前你看到的“垂直居中”其实是视觉巧合——<div>撑满父容器高度后，内部内容的位置容易被误判为居中，本质是<div>高度占满导致的。
2. 自定义元素默认的display行为是inline-block（属于替换元素性质的盒模型），在flex容器中只会占据自身内容所需的高度，不会像<div>那样撑满父容器的垂直空间，因此内部内容没有足够高度空间呈现“居中”效果。

你找到的两个解决办法，本质都是消除这种差异：

• 设置justify-content: center：直接指定flex容器的子元素（<my-element>）在垂直方向居中，不受自身高度限制；
• 设置display: contents：让自定义元素不再生成独立盒模型，其内部元素直接成为flex容器的子元素，等同于回到了用<div>嵌套的结构，自然和之前的表现一致。

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