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> 

希望它會有所幫助。