垂直居中 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>

如何 CSS 为 class .verticalalign 我必须为第二个 div 写入垂直对齐中心？
Parental div我不能修改，它将由主题简码生成。

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

Answer 1

Vertical-align 仅适用于 table 个元素，因此：

.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

你可以在不给 main 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>

希望对您有所帮助。

垂直居中 div

Vertical align center in div

html

center

alignment