I'm trying to center a div both vertically and horizontally using the "table-cell" method without specifying a specific height. However, it's not working as expected.
Why isn't this method working for me?
Here is the code I am using:
<section class="content-01 v-center">
<div>
<div class="container">
<div class="slogan text-center">
<h1>VERTICAL CENTERING</h1>
</div>
</div>
</div>
And here is the CSS associated with it:
.content-01.v-center {
display: table;
width: 100%;
}
.content-01.v-center>div {
display: table-cell;
vertical-align: middle;
margin-top: 0;
margin-bottom: 0;
float: none;
}
You can view the example on jsfiddle
Any suggestions on what I might be doing wrong? Thank you!