首先，我很抱歉。我知道这里针对此问题发布了各种解决方案，但在我的一生中，我无法让其中任何一个发挥作用。
对于响应式网站，我尝试将 h1 放在 div 中。
水平居中不是问题，但我在垂直居中时遇到问题。大概我做错了什么或误解了我在这里找到的解释（或者两者都有）。
因此，由于我可能以错误的方式解释了早期的解决方案，有人可以解释一下我到底需要在下面的代码中添加什么才能使 h1 垂直居中吗？
（为了让这个问题与尽可能多的人相关，我自己已经删除了我之前尝试这样做的所有代码。）
CSS：
html, body {
height: 100%;
margin: 0;
}
#section1 {
min-height: 90%;
text-align:center
}
HTML：
<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div>
您可以通过
display:table-cell#section1 {
height: 90%;
text-align:center;
display:table;
width:100%;
}
#section1 h1 {display:table-cell; vertical-align:middle}
更新-CSS3
对于垂直对齐的替代方法，您可以使用以下 css 3，所有最新的浏览器都应该支持它：
#section1 {
height: 90%;
width:100%;
display:flex;
align-items: center;
justify-content: center;
}
您可以使用
displayhtml, body {
height:100%;
margin:0;
padding:0;
}
#section1 {
width:100%; /*full width*/
min-height:90%;
text-align:center;
display:table; /*acts like a table*/
}
h1{
margin:0;
padding:0;
vertical-align:middle; /*middle centred*/
display:table-cell; /*acts like a table cell*/
}
我已经成功地将文本放入跨度标签中，然后在该跨度上设置vertical-align: middle。不知道它的跨浏览器兼容性如何，我只在 webkit 浏览器中测试过它。
HTML
<div id='sample'>
<span class='vertical'>Test Message</span>
</div>
CSS
#sample
{
height:100px;
width:100%;
background-color:#003366;
display:table;
text-align: center;
}
.vertical
{
color:white;
display:table-cell;
vertical-align:middle;
}
小提琴：演示
Flexbox 是一种将 h1 标签置于 div 中的可靠且受良好支持的方法。
<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div>
这是 OP:s HTML。让我们保持这样吧。 现在使用 CSS，我们可以添加显示 Flex 和一些属性。这是一个工作代码片段，展示了 Flexbox 如何进行垂直对齐。
#root {
width: 90vw;
height: 90vh;
border: 2px solid green;
}
#section1 {
display: flex;
flex-direction: row;
flex: 1;
min-height: 90%;
border: 2px solid red;
background-color: orange;
text-align: center;
/* this does align h1 if h1 is wider than its containing text */
}
#section1>h1 {
flex: 1;
/* this makes the h1 take all available width in its containing div, and makes text-align: center property work inside section1 */
background-color: #666333;
align-self: center/* this is finally the property that vertically aligns the h1 title inside its containing div */
}<!DOCTYPE html>
<html>
<header>Demo</header>
<div id="root">
<div id="section1">
<h1>Title Centered</h1>
</div>
</div>
</html>由于接受的答案的 CSS3 选项垂直对齐包含的 div 而不是要求的 h1 标签，因此此答案显示了如何在预先确定大小的、更大的包含 div 内垂直对齐 h1。
我正在尝试将 h1 置于 div 中心。
在 2024 年，
align-content: center;#section1 {
height: 160px;
background-color: lightblue;
align-content: center; /* vertical centering*/
}
body {
height: 100%;
margin: 0;
}
#section1 {
height: 160px;
background-color: lightblue;
align-content: center; /* vertical centering*/
}
/* the below is for horizontal centering (irrelevant to the question) */
div {
width: fit-content;
margin: auto;
}
#section2 {
height: 30px;
background-color: red;
}<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div>
<div class="section" id="section2">
Other section (section2)
</div>另请参阅“CSS 最终在 2024 年添加垂直居中”，作者：James Smith：
适用于 2024 年的默认布局，允许使用 1 个 CSS 属性实现垂直居中align-content支持自Chrome：123 | 火狐浏览器：125 | 野生动物园：17.4
CSS对齐的现状是切换到flexbox或grid，因为align-content在默认布局（流）中不起作用。
2024 年，浏览器已经实现了的 flow 布局。align-content
因此不再有表格单元格、绝对定位、内联内容、单行或多行弹性框、网格内容或网格单元格或自动边距！
只需使用顶部和底部填充，它就会自动将内容垂直居中。