div中的垂直对齐中心

Question

我有这段代码，我无法将第二个 div 中的内容垂直对齐到中心。

<div style="min-height: 317px"> <!-- this min div is auto generated-->
    <div class="verticalalign">
        <h1>Heading</h1>
        <p>Some text</p>
    </div>
</div>

.verticalalign 类的 CSS 如何写到第二个 div 的垂直对齐中心？
Parental div 我无法修改，它将由主题短代码生成。

我还需要在子 div 中水平对齐文本。

Answer 1

Vertical-align 仅适用于表格元素，因此：

.fusion-column-wrapper {background: #eee; display: table; width: 100%;}
.verticalalign {display: table-cell; vertical-align: middle; }

http://jsfiddle.net/xcgjkm8v/

看到vertical-align的有效值为middle，而不是center。

Answer 2

您可以在不向主 div 提供 css 的情况下制作中心，如下所示：

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

<div style="min-height: 317px"> 
    <div class="verticalalign">
    <h1>Heading</h1>
    <p>Some text</p>
    </div>
</div>

希望它会有所帮助。