我知道这是一个常见的问题,我已经问了类似的问题。 但这次我找不到解决办法。 我试图垂直居中一个文本,在DIV中可以有不同的高度可以有不同的高度。 我试图用CSS解决这个问题,而不是触及HTML。
<div id="test">
<div id="sumup">
<h1 class="titre">Title</h1>
<div id="date">hello guys</div>
</div>
</div>
我的目标是让文字无论大小都垂直和水平居中。
答案 0 :(得分:19)
这是:
#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年,感谢网络的变化。假设您不支持obsolete browsers,使用the Flex model垂直居中的元素通常更简单,更清晰。
#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>
答案 1 :(得分: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;
}
答案 2 :(得分:0)
带display
解决方案的CSS:
#test {
display:table;
}
#sumup {
display:table-cell;
}