如何在 div 中垂直居中 H1？答案

【问题标题】：How do I vertically center an H1 in a div?如何在 div 中垂直居中 H1？
【发布时间】：2014-01-01 00:09:54
【问题描述】：

首先，我很抱歉。我知道这里有针对这个问题发布的各种解决方案，但在我的一生中，我无法让它们中的任何一个起作用。

对于响应式网站，我尝试将 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>

【问题讨论】：

去掉 h1 padding 和 margin 并在 div 上使用 vertical-align。
@MelanciaUK 那行不通。
将行高设置为 1.2
@NiettheDarkAbsol 是的，我刚刚在小提琴上试过。不好的评论。哈哈
查看此链接stackoverflow.com/questions/6254793/…

标签： html css responsive-design

【解决方案1】：

你可以用display:table-cell实现垂直对齐：

#section1 {
    height: 90%; 
    text-align:center; 
    display:table;
    width:100%;
}

#section1 h1 {display:table-cell; vertical-align:middle}

Example

更新 - CSS3

对于垂直对齐的另一种方法，您可以使用所有最新浏览器都应支持的以下 css 3：

#section1 {
    height: 90%; 
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

Updated fiddle

【讨论】：

不错！对齐项目：居中；是我正在寻找的垂直对齐方式。谢谢。
感谢 CSS3 替代品！
在我的场景中没有任何效果。这正是我正在寻找的。非常感谢！

【解决方案2】：

您可以使用display 属性实现此目的：

html, 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*/
}

演示：http://jsfiddle.net/a3Kns/

【讨论】：

干杯！使用 Pete 的解决方案，但本质上这是相同的。感谢您的帮助！

【解决方案3】：

我已经成功地将文本放入跨度标记中，然后在该跨度上设置垂直对齐：中间。不知道这是如何跨浏览器兼容的，我只在 webkit 浏览器中测试过。

【讨论】：

谢谢！假设这也应该起作用。接受的答案会帮助您确保其跨浏览器兼容吗？
回头看我的代码，其实挺hacky的，所以上面table的回答比较好。我的方法需要一个额外的跨度设置为width: 0;。但是，如果您或其他人有兴趣，请参阅 jsfiddle here

【解决方案4】：

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;
}

小提琴：Demo

【讨论】：

【解决方案5】：

只需使用上下内边距，它会自动将内容垂直居中。

【讨论】：

【解决方案6】：

Flexbox 是一种在 div 中居中放置 h1 标签的可靠方法。

<div class="section" id="section1">
  <h1>Lorem ipsum</h1>
</div>

这是 OP:s HTML。让我们保持这种状态。现在使用 CSS，我们可以添加 display flex 和一些属性。这是一个工作代码 sn-p，它显示了 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 标记，因此此答案显示了 h1 如何在预先确定的、更大的包含 div 内垂直对齐。

【讨论】：