Question

首先，我道歉。我知道这里有针对这个问题的各种解决方案，但对于我的生活，我无法让他们中的任何一个工作。

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

Answer 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

Answer 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/

Answer 3

我成功地将文本放在span标签中，然后在该范围内设置vertical-align：middle。不知道这是跨浏览器兼容的，我只在webkit浏览器中测试过它。

Answer 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

Answer 5

这是jQuery方法。看起来像矫枉过正，但它会计算偏移量。

<html>
<head>
<title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/dreamerslab/jquery.center/master/jquery.center.js"></script>
    <script type="text/javascript">
        $(function(){

            $('#jquery-center').center();

        });
    </script>

</head>
<body>
    <div id="jquery-center" style="position:absolute;">
       <h1>foo</h1>
    </div>
</body>
</html>

Answer 6

只需在顶部和底部使用填充，它将自动使内容垂直居中。

Answer 7

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

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

这是 OP:s 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 标签，因此此答案显示了 h1 如何在预先调整大小的更大的包含 div 内垂直对齐。

如何在div中垂直居中H1？

7 个答案: