以绝对定位的div为中心内容 [英] Center content in a absolute positioned div

问题描述

我有一个绝对放置的元素，里面有内容。它可以是< h1> 或一些< p> 标记。所以我不知道内容的高度。

I have an absolutly positioned element with content inside. It can be a <h1> or a few <p> tag. So I don't know the height of the content.

我如何将内容垂直居中在绝对定位的 div 内？

How can I vertically center the content inside the absolutly positioned div?

HTML：

<div id="absolute">
    <div class="centerd">
    <h1>helo</h1>
    <span>hi again</span>
    </div>
</div>   

CSS：

#absolute {
    position:absolute;
    top:10px;
    left:10px;
    width:50%;
    height:50%;
    background:yellow;
}

.centerd {
    display:table-cell;
    vertical-align:middle;
}

提要

推荐答案

如果添加 display：table 到您的 #absolute div中，您应该得到想要的东西：

if you add display:table to your #absolute div you should get what you want:

http://jsfiddle.net/3KTUM/2/

这篇关于以绝对定位的div为中心内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！