如何在 DIV 中垂直居中 H1？

Question

如何在 DIV 中垂直居中 H1？

htmlcssresponsive-design

63

首先，我要道歉。我知道这个问题已经有很多种解决方案了，但我真的无法让它们中的任何一个起作用。

我正在尝试将一个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>

- Edward Touw

去掉 h1 的 padding 和 margin，并在 div 上使用 vertical-align。 - emerson.marini

@MelanciaUK 那样做不行。 - Niet the Dark Absol

@NiettheDarkAbsol 是的，我刚在fiddle上试了一下。糟糕的评论。哈哈 - emerson.marini

像这样的吗？http://jsfiddle.net/TNb39/ - Vikas Ghodke

@VikasGhodke：是的，你和Pete提供的解决方案正是我在寻找的。感谢大家的帮助！ - Edward Touw

显示剩余2条评论

6个回答

5

您可以使用"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*/
}

Demo: http://jsfiddle.net/a3Kns/

- emerson.marini

谢谢！我采用了Pete的解决方案，但本质上它与这个相同。感谢您的帮助！ - Edward Touw

1

弹性盒布局（Flexbox）是一种稳定的、得到良好支持的方式，用于将 h1 标签居中于 div 容器内。

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

这是原始HTML代码。现在，通过CSS的display 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。

- Erkka Mutanen

1

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

Fiddle : 演示

- Amarnath Balasubramanian

1

我成功地将文本放在标签中，并在该上设置了vertical-align: middle。不知道这在跨浏览器兼容方面如何，因为我只在Webkit浏览器中进行了测试。

- benadamstyles

谢谢！假设这也应该可以工作。被接受的答案会帮助您确保它符合跨浏览器的标准吗？ - Edward Touw

回顾我的代码，实际上它相当的hacky，所以上面的“table”答案更好。我的方法需要一个额外的span设置为“width: 0;”。但是，如果你或其他人感兴趣，可以在这里查看jsfiddle：http://jsfiddle.net/LeedsEbooks/jWc68/ - benadamstyles

-1

只需使用上下填充，它将自动垂直居中内容。

- Carloscar Tovar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pete · Accepted Answer

你可以使用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;
}

更新的JSFiddle代码