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的垂直对齐中心？
父母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

您可以在不将css赋予main div的情况下进行居中，如下所示：

 .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> 

希望它会有所帮助。