如何忽略子元素margin实现Flex容器内元素居中对齐？

针对你遇到的h1带有不对称margin导致align-items: center对齐失效，且不能给h1设置flex属性的问题，提供两种可行方案：

方案1：给h1包裹容器转移margin到padding #

将h1的margin转移到外层容器的padding上，让Flex布局的子元素是容器和p，这样align-items: center会基于容器和p的内容盒子对齐，同时不影响h1的innerText。

<div>
  <div class="h1-container">
    <h1>Header</h1>
  </div>
  <p>Ctrl-H</p>
</div>

h1 {
  margin: 0; /* 清除原margin */
}

.h1-container {
  padding: 30px 0 20px 0; /* 用padding替代原margin的空间 */
}

div {
  display: flex;
  align-items: center;
}

方案2：用伪元素模拟h1的上下margin空间 #

保留h1的innerText结构，通过伪元素生成上下空白空间，让h1自身的margin为0，这样Flex对齐时会忽略原margin的影响。

<div>
  <h1>Header</h1>
  <p>Ctrl-H</p>
</div>

h1 {
  margin: 0;
  position: relative;
}

/* 模拟原margin-top:30px的空间 */
h1::before {
  content: "";
  display: block;
  height: 30px;
}

/* 模拟原margin-bottom:20px的空间 */
h1::after {
  content: "";
  display: block;
  height: 20px;
}

div {
  display: flex;
  align-items: center;
}

这两种方案都不会修改h1的innerText内容，完全满足你生成目录的需求，同时实现两个子元素的居中对齐。

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