绝对div垂直居中对齐和文本居中对齐

Question

我有一个具有一定宽度和高度的div。 在那个div中，我也有一段文字。 我想将该文本对齐到中心（水平）和中间（垂直）。 但是div也需要一个position: absolute 。 因此可以将其放置在另一个div内。

但是由于absolute的原因，文本将不再垂直对齐。

这就是我所拥有的：

<div style="z-index:20;
    position: absolute;
    border: 1px dotted #16232d;
    width: 300px;
    height: 200px;
    line-height: 200px;
    top:88px; left:31px;
    display: table-cell;
    line-height: normal;
    font-size:32px;
    text-align: center;
    vertical-align: middle;">
   Lorem ipsum dolor sit amet
</div>

示例： http ： //jsfiddle.net/s8jp5ohh/

文本将永远不包含任何<br> 。 因此，它总是一行。 但是，当文本大于div的宽度时，它应该自动换行。 因此，我想保留该功能（就像您在小提琴中看到的那样）。

有没有一种方法可以使文本在垂直和水平方向上居中对齐？

Answer 1

这将解决它： 演示

CSS

.myDiv {
    z-index:20;
    position: absolute;
    border: 1px dotted #16232d;
    width: 300px;
    height: 200px;
    top:88px;
    left:31px;
    line-height: normal;
    font-size:32px;
    text-align: center;
    display: table;
}
.myDiv p {
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="myDiv">
    <p>Lorem ipsum dolor </p>
</div>

Answer 2

您必须使用hack，但是它可以：

的jsfiddle。

HTML

<div class="block" style="z-index:20;
position: absolute;
border: 1px dotted #16232d;
width: 300px;
height: 200px;
line-height: 200px;
top:88px; left:31px;
display: table-cell;
line-height: normal;
font-size:32px;
text-align: center;
vertical-align: middle;">
    <p style="vertical-align: middle; display: inline-block;"> Lorem ipsum dolor sit    amet</p>

CSS：

.block:before {
    content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}