html - 在绝对 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 的宽度时，它应该自动换行。所以我想保留该功能(就像您在 fiddle 中看到的那样)。

有没有办法让文本居中、垂直和水平对齐？

Answer 1

这将解决它: DEMO

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>