html - 当 div 位置为 :absolute 时垂直对齐标题

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

您可以使用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