我正在尝试将一个 div
垂直和水平居中到另一个具有 overflow: hidden
的 div
我已经成功地水平居中居中,但不是垂直居中。
HTML
<div class="outer">
<div class="inner">
<div class="content">
<p>Alot of content</p>
</div>
</div>
</div>
CSS
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
display: inline-block;
position: relative;
bottom: -50%;
right: -50%;
}
.content {
position: relative;
top: -50%;
left: -50%;
width: 500px;
height: 500px;
}
为什么我的 top: -50%
被忽略了,但我的 left: -50%
却按预期工作?
最佳答案
其实fiddle并不清楚。
我不知道水平居中。所以我添加了它。但如果您不想要它,请跳过它。
对于垂直居中,你可以试试这个:
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
display: inline-block;
position: relative;
text-align:center; //horizontal center
}
.content {
position: relative;
display: table-cell; //<-vertical center
text-align: center; //<-vertical center
width: 500px;
height: 500px;
}
关于html - 垂直和水平居中 overflow hidden 的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24638379/