绝对定位div中的中心内容

我有一个绝对定位的元素，里面有内容。它可以是<h1>或几个<p>标签。所以我不知道内容的高度。绝对定位div中的中心内容

我该如何将内容垂直居中放置在绝对位置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; 
}

Fiddle

来源

2013-04-26 user2324261

如果添加display:table你#absolute DIV你应该得到你想要的东西：

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

来源

2013-04-26 14:37:16 Pete

这不居中内容..它只是使内容* *开始从中心 – 2013-04-26 14:38:13

@ExplosionPills似乎中心我的内容 - 尝试加入更多的内容和你将看到它保持垂直对齐，而不是从中心开始。你可能会认为它是从中心开始的，因为h1会有自然的顶部填充，从而将其推倒 – Pete 2013-04-26 14:41:18

更改#absolute格也使用：

display:table; 
vertical-align:middle; 
text-align:center;

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

来源

2013-04-26 14:39:13

只是要在div relative其absolute父母和使用text-align: center，像这样：

.centerd { 
    position: relative; 
    width: 100%; 
    text-align: center; 
    /*display:table-cell; 
    vertical-align:middle;*/ 
}

见example fiddle

来源

2013-04-26 14:42:42 Nelson

使用文本对齐：中心或左：50％

来源

2016-08-22 07:06:40 santhosh

这可以用Flexbox的做太：

#absolute { 
    align-items: center; 
    display: flex; 
    justify-content: center; 
}

来源

2017-06-09 13:18:30

水平和垂直位置的绝对中心。

.center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50% , -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
}

<div class="obj"> 
 
    <div class="center">Test</div> 
 
</div>

来源

2018-03-07 11:33:48

绝对定位div中的中心内容

回答

相关问题