在绝对定位的 div 中居中内容

Posted 2023-03-05

【中文标题】在绝对定位的 div 中居中内容

【英文标题】：Center content in a absolute positioned div

【发布时间】：2013-04-20 18:44:21

【问题描述】：

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

如何在绝对定位的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

【参考方案1】：

水平和垂直位置绝对居中。

.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>

【讨论】：

问题是how can I vertically center the content inside the absolutely positioned div?，绝对定位的div是.obj。您的答案在.obj 上没有position: absolute;，应用时不起作用，请参阅此jsFIddle。

【参考方案2】：

这也可以通过 flexbox 来完成：

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

【参考方案3】：

使用 text-align:center 或 left:50%

【参考方案4】：

只需将 div relative 设为其 absolute 父级并使用 text-align: center，如下所示：

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

见example fiddle

【讨论】：

您的修复正确显示了如何水平对齐文本元素，但 OP 询问如何垂直对齐。

【参考方案5】：

将您的 #absolute div 更改为也使用：

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

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

【参考方案6】：

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

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

【讨论】：

这不会使内容居中 .. 它只是使内容 从中心开始

@ExplosionPills 似乎为我将内容居中 - 尝试添加更多内容，您会看到它保持垂直对齐，而不是从中心开始。您可能会认为它从中心开始，因为 h1 将具有自然的顶部填充，将其向下推