html - 转换的垂直居中无法按预期工作

Question

通常此代码有效，但出于某种原因，它没有在其父元素内垂直居中。会不会是背景图片的原因？

http://jsfiddle.net/tmyie/BcmNw/

<div class="background-image">
    <div class="omg-title">This is the title</div>
</div>

CSS:

.background-image {
    background-image: url('');
    height: 600px;
    background-size: contain;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    text-align: center;
}
.omg-title {
    padding: 15px;
    -webkit-transform: translate(-50%, -50%);
    position: absolute;
}

Answer 1

由于您使用的是 position: absolute，您可以通过以下更改删除转换并将文本设置为居中:

.omg-title {
    top: 50%;
    left: 50%;
    position: absolute;
}

要完美水平居中，您应该知道文本的宽度，例如，如果它是 100px，您应该应用 margin-left: -50px;

第二种解决方案的例子http://jsfiddle.net/7ScDh/