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;
}

小提琴

4

6 回答 6

16

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

.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-07T11:33:48.433 回答
13

如果你添加display:table到你的#absolutediv 你应该得到你想要的：

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

于 2013-04-26T14:37:16.307 回答
10

这也可以通过 flexbox 来完成：

#absolute {
  align-items: center;
  display: flex;
  justify-content: center;
}
于 2017-06-09T13:18:30.277 回答
7

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

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

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

于 2013-04-26T14:39:13.480 回答
2

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

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

参见示例小提琴

于 2013-04-26T14:42:42.027 回答
1

使用文本对齐：居中或左：50%

于 2016-08-22T07:06:40.503 回答