html - 垂直和水平居中 overflow hidden 的div

Question

我正在尝试将一个 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;
}

FIDDLE

为什么我的 top: -50% 被忽略了，但我的 left: -50% 却按预期工作？

Answer 1

DEMO

其实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;
}