在一个高度未知的div中垂直居中一个高度未知的文本

Question

我知道这是一个常见的问题，我之前也问过类似的问题。但这一次我找不到解决方法。

我正在尝试用CSS垂直居中一个文本，这个文本在一个高度可能不同的DIV中。我试图仅使用CSS解决这个问题，而不去修改HTML。

例如：http://jsfiddle.net/F8TtE/

 <div id="test">
    <div id="sumup">

        <h1 class="titre">Title</h1>
        <div id="date">hello guys</div>
    </div>
 </div>

我的目标是让文字无论大小都能垂直水平居中。

- Damien

---

类似的问题和解决方案可以在这里找到：http://stackoverflow.com/questions/19788670/cant-vertically-alignmiddle-absolutely-positioned-block-text#19789090 - Mahmoud

这是一个很棒的参考链接--http://css-tricks.com/centering-in-the-unknown/。此解决方案使用`:before` CSS“假元素”。 - Ian Campbell

@Mahmoud，所链接的问答几乎没有回答这个问题：“不触碰HTML”和“无论其大小”。 - Denys Séguret

你的代码里有一个多余的 </div>，这是故意的吗？ - T J

抱歉，Denys！现在没事了 :) - Damien

Answer 1

这是它：

#test {
    text-align:center;
}
#test::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#sumup {
    display: inline-block;
    vertical-align: middle;
}

#test {
    height : 180px;
    text-align:center;
    background: yellow;
}

#sumup {
    background-color: #123456;
}

#test:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  #sumup {
    display: inline-block;
    vertical-align: middle;
  }

<div id="test">
  <div id="sumup">
   
   <h1 class="titre">Title</h1>
   <div id="date">hello guys</div>
  </div>
</div>

---

编辑：现在是2015年，网络技术不断更新。假设您不支持过时的浏览器，使用Flex模型通常更简单、更清晰地垂直居中元素。

#test {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#test {
    height : 180px;
    background: yellow;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#sumup {
    background-color: #123456;
}

<div id="test">
  <div id="sumup">
   <h1 class="titre">Title</h1>
   <div id="date">hello guys</div>
  </div>
</div>

- Denys Séguret

---

我现在已经使用表格/单元格方法有一段时间了，但是这个...这就像魔法一样。 - Nahydrin

每个网页上的答案都这样做。OP说“在一个可以有不同高度的DIV中”，意思是父级div的高度不能是固定的测量。 - Shawn Erquhart

有了父元素的百分比高度，这个方法不起作用。 有人知道其他的方法吗？ - Edmundo Santos

这是正确的解决方案。我已经搜索了相当长一段时间，但这是完美的。 - Maverick

关于2015年的编辑，我认为大多数开发人员仍然希望支持IE 9和10，flex会使事情变得有点复杂。 - turbopipp

有人能解释一下为什么这个代码可以运行吗？我太好奇了 :) - carinlynchin

Answer 2

这里有另一种方法，使用display:table-cell，因为我不太理解dystroy的回答是如何工作的。

#test {
    width:100%;
    height : 400px;
    display:table;
}

#sumup {
    width : 100%;

    height : 100%;
    background-color: #123456;
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/F8TtE/3/

- TreeTree

Answer 3

CSS使用display属性的解决方案：

#test {
  display:table; 
}

#sumup {
  display:table-cell; 
}

演示 http://jsfiddle.net/F8TtE/7/

- DaniP