垂直对齐的Flex项未正确对齐

Question

我有一些嵌套元素，它们的“ div：display：flex”设置为内部div具有“ flex-direction：column”，因此它的子元素垂直堆叠。

我如何获得它，所以红色的内部div中的所有内容都正确地垂直居中，这些flex-items是不同的HTML元素类型，而他们没有这样做？ 如果从下面的示例中看到，则H1标题上方的空间明显大于底部锚点链接下方的空间，但内部div的每侧标准填充值为1rem，并且遵循w3规范。

我将h1标题放大了以突出该问题。

Codepen： https ：//codepen.io/emilychews/pen/VymXKY

CSS

#section-1 {
 display: flex;
 margin: 0 auto; 
 width: 100%; height: 500px;
 background-color: blue; 
 box-sizing: border-box;}

#row-1 {
 display:flex;
 justify-content: center;
 margin: auto;
 padding: 1rem;
 background-color: red;
 width: 70%;
 max-width: 1043px;
 box-sizing: border-box;
 }

#row-1 .inner {
 display: flex;
 flex-direction: column;
 justify-content: center;
 box-sizing: border-box;
 padding: 1rem; 
}

#row-1 .inner h1, #row-1 .inner h3, #row-1 .inner p {
color: white; text-align: center;
}
#row-1 .inner hr {border:0; background:white; width: 75px; height: 5px;}
.inner h1 {font-size: 40px;}

HTML

<section id="section-1">
  <div id="row-1">
    <div class="inner" >
      <h1>SOME WORDS TO MAKE A TITLE</h1>
      <h3>My subheading. Your subheading.</h3>
      <p>A random sentance about something or other.<br />
        Another random sentance about something or other.</p>
      <hr>
      <p><a href="#">LEARN MORE</a></p>
    </div>
  </div>
</section>

Answer 1

像h1 ， p和hr这样的元素具有预定义的边距，并且由于它们不相同，您将得到描述/显示的结果。

给他们全部相等的顶部/底部边距，例如

.inner > * {
  margin: 10px auto;
}

堆栈片段

 #section-1 { display: flex; margin: 0 auto; width: 100%; height: 500px; background-color: blue; box-sizing: border-box; } #row-1 { display: flex; justify-content: center; margin: auto; padding: 1rem; background-color: red; width: 70%; max-width: 1043px; box-sizing: border-box; } #row-1 .inner { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 1rem; } #row-1 .inner h1 { color: white; text-align: center; margin-top: 0; padding: 0; } #row-1 .inner h3 { color: white; text-align: center; } #row-1 .inner p { color: white; text-align: center; } #row-1 .inner pa { color: white; text-align: center; margin: 0; padding; 0; } #row-1 .inner hr { border: 0; background: white; width: 75px; height: 5px; } .inner h1 { font-size: 40px; } .inner > * { margin: 10px auto; /* added */ } 

 <section id="section-1"> <div id="row-1"> <div class="inner"> <h1>SOME WORDS TO MAKE A TITLE</h1> <h3>My subheading. Your subheading.</h3> <p>A random sentance about something or other.<br /> Another random sentance about something or other.</p> <hr> <p id="lowerlink"><a href="#">LEARN MORE</a></p> </div> </div> </section>