<分区>
html - h1 和 h2 水平和垂直居中
如何在垂直和水平方向上对齐 h1 和 h2，同时保持高度为视口(viewport)的 100%？
我添加了 align-items: center; justify-content: center; 到容器和 text-align: center; vertical-align: center; 到标题类。将 display: block; 添加到任何一个都不执行任何操作。
预期:
实际:
到底是怎么回事？是导航栏吗？
#welcome-section {
height: 100vh;
align-items: center;
justify-content: center;
}
.welcome-header {
text-align: center;
vertical-align: center;
}<div id="welcome-section">
<h1 class="welcome-header">Namaste, Kevin here.</h1>
<h2 class="welcome-header">And I'm a front-end developer</h2>
</div>最佳答案
如果您使用 flex 对齐属性，则需要 flex 显示。
#welcome-section {
height: 100vh;
display:flex;/*this is what was missing */
flex-flow:column;/*this is what was missing too*/
align-items: center;
justify-content: center;
}
https://codepen.io/gc-nomade/pen/MqJgVG
body {
margin:0;
}
#welcome-section {
height: 100vh;
align-items: center;
justify-content: center;
display: flex; /*this is what was missing */
flex-flow: column; /*this is what was missing too*/
}
.welcome-header {
text-align: center;
/*vertical-align: center; useless*/
}<div id="welcome-section">
<h1 class="welcome-header">Namaste, Kevin here.</h1>
<h2 class="welcome-header">And I'm a front-end developer</h2>
</div>关于html - h1 和 h2 水平和垂直居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52104825/