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

Question

我知道这是一个常见的问题，我已经问了类似的问题。 但这次我找不到解决办法。 我试图垂直居中一个文本，在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>

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

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> 

Answer 2

这是使用display:table-cell的另一种方式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/

Answer 3

带display解决方案的CSS：

#test {
  display:table; 
}

#sumup {
  display:table-cell; 
}

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