如何将弹性项目居中而忽略其边距？

Question

如何在忽略边距时使两个弹性项目居中？在下面的示例中，

h1

具有不对称的边距，当使用

align-items: center

时，它看起来不太好。我不想将

flex

放在

h1

元素上，因为我在目录中使用标题的

innerText

，而且我也不想在其中添加快捷方式。

h1 {
  margin: 30px 0 20px 0;
}

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

}

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

Answer 1

试试这个代码。

CSS

html {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  margin: 30px 0 20px 0;
}

div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

HTML

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