Question

我正在尝试将div垂直和水平居中于另一个div内overflow: hidden <div class="outer"> <div class="inner"> <div class="content"> <p>Alot of content</p> </div> </div> </div>我已成功地将其水平居中，但不是垂直居中。

HTML

.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;
}

CSS

top: -50%

FIDDLE

为什么我的left: -50%被忽略，但我的{{1}}按预期工作？

Answer 1

<强> DEMO

实际上小提琴并不清楚。

我不了解水平中心。所以我添加了它。但如果你不想让它跳过它。

对于垂直中心，您可以尝试：

.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;
}

Answer 2

您可以使用以下代码始终将任何元素居中，而不会出现负边距黑客攻击。内容将自动从顶部，底部，左侧，右侧对齐

HTML：

<div class="outer">
    <div class="content">
    </div>
</div>

CSS：

.outer {
    width: 100px;
    height: 100px;
    overflow: hidden;
    background: yellow;
    position: relative;
}
.content {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
}

Answer 3

从this article获取，只要您声明身高，就可以使用类似的类：

.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

如果你将这个类添加到你的外部div中，一切都应该有效。

Answer 4

我试图避免使用translate3d为旧的IE支持解决此问题，但最终无法弄清楚为什么我的top: -50%无效。：（

这是我最终的 CSS 。

.outer {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    background: yellow;
}

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.content {
    position: relative;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
}

FIDDLE

垂直和水平居中一个div隐藏溢出

4 个答案: