Question

通常这段代码有效，但由于某种原因，它并不是在它的父元素中垂直居中。这可能是因为背景图片？

<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

尝试其中任何一项，或删除绝对定位：

1）中心.omg-title div

.omg-title {
    left: 50%;
    position: absolute;
    margin-left: -50px; // depending on width
}

2）给.omg-title div全宽：

.omg-title {
    width: 100%;
}

编辑：对于垂直对齐，请尝试（演示此处：http://jsfiddle.net/6E5as/）：

.omg-title {
    top: 50%;
    position: absolute;
    margin-top: -10px; // depending on height
    text-align: center;
    width: 100%;
}

Answer 2

如果您只是取消.omg-title的所有样式，那么它就会很好，因为.background-image有text-align:center;。

JSFiddle提供证明

Answer 3

删除位置和转换属性，它将适合您：

.omg-title {
    padding: 15px;
}

Answer 4

由于您使用的是position：absolute，因此您可以删除转换并将文本设置为居中，并进行以下更改：

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

要水平完善中心，你应该知道文字的宽度，例如，如果它是100px你应该应用margin-left: -50px;

第二个解决方案http://jsfiddle.net/7ScDh/

的示例

垂直居中，变换无法按预期工作

4 个答案: