Dynamic height for parent when verically centering with table/table-cell?

Hi,

I a couple of areas on a website that covers 100% viewport height, inside these I have a paragraph of text which I want to always be vertically centered.
Using the table, table-cell approach works fine, IF I put the table-height in pixels. The thing is I don’t want to do that.

Is there a way to solve this?

<div class="table">
<p></p>
</div>
.table{
display: table;
height: 100%;
}

p{
display: table-cell;
vertical-align: middle;
}

Did you try setting the body and html to height:100%?


body,html {
    height:100%;
}

.table {
    display:table;
    height:100%;
}
p {
    display:table-cell;
    vertical-align:middle;
}

Yes I did, but thanks to your message I found the problem, The .table class had another child which the p-class is child to, so when I put that one to 100% height it worked. thx.

That was quick. Glad you found it.

Isolated snippits of code often omit significant pieces of the puzzle. If you can review the link at the bottom of my post, especially the part about providing a working page (starts with doctype, ends with </html>) that demonstrates the problem, it would help us in the future… it would save some guessing. :slight_smile:

Thanks for the feedback.

Cheers :slight_smile: