Vertical align center in div

Question

I have this code and i cannot vertical align content in second div to center.

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

How CSS for class .verticalalign i must write to vertical align center for second div ?
Parental div i can't modify, it will be generated from theme shortcode.

I also need to horizontal text align in child div.

Answer 1

Vertical-align works with table elements only, so:

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

http://jsfiddle.net/xcgjkm8v/

See that the valid value of vertical-align is middle , not center .

Answer 2

You can make center without giving css to main div like following:

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

Hope it will help.