html - 在位置 :absolute parent 内垂直对齐一个 div

Question

我有一个这样的 HTML 结构:

<div class="out">
    <div class="container">
        <div class="content">
            <p>hello</p>
        </div>
    </div>
</div>

.container div 绝对定位为其父级的一半。现在，在这个容器中，我想垂直对齐 .content div。由于 .container 被绝对定位，我遇到了麻烦。

这是一个 fiddle :http://jsfiddle.net/2La6vdrc/2/

我希望“你好”内容垂直居中

我需要这个用于 IE8+。

谢谢!

Answer 1

您可以遵循与此类似的模式:

.container {
  position: absolute;
}
.content {
  position: absolute or relative;
  top: 50%;
  transform: translateY(-50%);
}

这是你的 fiddle : http://jsfiddle.net/2La6vdrc/6/

在 CSS-Tricks 博客上阅读更多关于垂直居中的内容: https://css-tricks.com/centering-css-complete-guide/