Question

我试图将文本垂直居中于绝对定位的div内。

我尝试table-cell方法没有运气。这是一个响应式布局，所以我试图避免设置固定的高度，也不想使用Javascript。

由于

HTML＆amp; CSS：

<div class="page-banner" style="background: url(http://www.bimga.com.php53-3.ord1-1.websitetestlink.com//wp-content/uploads/BIMGA_Website_InteriorPage_Banners_About.jpg) no-repeat scroll 0 0 / cover transparent">
    <img style="visibility:hidden" src="http://www.bimga.com.php53-3.ord1-1.websitetestlink.com//wp-content/uploads/BIMGA_Website_InteriorPage_Banners_About.jpg">
    <div class="left">
        <div class="page-banner-text">this text needs to be verticall centered</div>
    </div>
</div>

<style type="text/css">
.page-banner {
    margin-bottom: 35px;
    list-style: none;
    width: 100%;
    padding-left: 0;
    position: relative;
}

.page-banner img {
    width: 100%;
    height: auto;
}
.page-banner .left {
    background-color: rgba(10, 65, 142, .75);
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    text-align: center;
    width: 50%;
}    
</style>

Answer 1

我们可以这样使用transform：

Have a jsBin!

CSS

.page-banner-text {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

关于这项技术的

More information。

Answer 2

您可以做的是，将文本位置设置为绝对值。然后给它一个顶部：50％;并给它一个零下半高的上边距。

Answer 3

我不喜欢使用绝对位置和顶部位置：50％用于更好的多浏览器支持（特别是在较旧的IE版本上）所以我更喜欢添加line-height：x em;在.page横幅类中。因为你已经用％定义了高度，所以无论实际像素高度如何，它都需要始终位于中心。

.page-banner .left:after {

content: "Background text";
position: absolute;
top: 40%;
left: 35%;
z-index: -1;

}

在绝对定位的div内垂直居中文本

3 个答案: