Question

我希望标题文本在div的中间垂直对齐，目前使用margin-top向下推，但是当标题较长并溢出到第二行时会导致不一致。

请在此处查看示例： http://ryconbg.jaffewebsites.com.au/our-company/sustainability-and-energy-efficiency/

HTML

    <div id="page-featured" style="background: url(<?php echo $src[0]; ?> ) !important; overflow: hidden; background-size: cover !important; background-position: center !important;"></div>

    <div id="page-overlay">
        <div id="page-titles">
            <h1><?php the_title(); ?></h1>
        </div>
    </div>

CSS

#page-overlay, #page-featured {
    height: 400px;
    width: 100%;
}

#page-overlay {
    position: absolute;
    top: 95px;
    background-color: rgba(0,0,0,0.1);
    z-index: 100;
    color: #FFF;
}

#page-titles {
    width: 100%;
    height: 100%;
    text-align: center;
}

#page-titles h1,
#page-titles p {
    margin: 0px;
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
}

提前致谢！

Answer 1

如果您知道要尝试居中的元素的高度（不需要其容器的高度），您可以使用绝对定位和负边距来实现此目的。将top上的#page-titles h1值更改为50%，然后将margin-top减去其高度的一半，在您的情况下为margin-top: -24px。我做了一个演示这种方法的小提琴：http://jsfiddle.net/8s1g7ws0/你可以看到它适用于水平居中。

这个想法是top: 50%使元素开始在它的容器中间，所以它实际上并不居中。然后，通过将其高度的一半向上移动，我们匹配两个元素的中间点。

如果你不知道元素的高度，你可以将容器元素显示为table-cell，然后你可以使用vertical-align: middle来集中内部的内容。以下是您需要进行的更改：

将display: table添加到#page-overlay
从position: absolute移除#page-titles h1。
将display: table-cell和vertical-align: middle添加到#page-titles。

Browser support for display: table

Answer 2

您可以使用transform:translate（CSS3）进行垂直对齐

详细了解此处：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

<强> CSS

#page-overlay, #page-featured {
    height: 400px;
    width: 100%;
}
#page-overlay {
    position: absolute;
    top: 95px;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 100;
    color: #FFF;
}
#page-titles {
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#page-titles h1, #page-titles p {
    margin: 0px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    width: 100%;
}

<强> DEMO HERE

div为position时的vertical-align标题：绝对

2 个答案: