I'm completely new to this, so please bear with me, but I have a question.
I've been attempting to vertically align a div in the center of my webpage, but I can't seem to get it to work. The text always ends up loading in the top left corner instead. Any advice?
/*=======================================
HOME
=======================================*/
#home {
height: 100%;
}
#home-cover {
height: 100%;
background-image: url("../img/bg-home.jpg");
}
#home-content-box {
width: 100%;
height: 100%;
display: table;
}
#home-content-box-inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#home-heading h3 {
color: #fff;
font-size: 55px;
font-weight: 700;
margin;
20px 0 20px 0;
}<!-- Home -->
<section id="home">
<div id="home-cover" class="bg-paralax animated fadeIn">
<div id="home-content-box">
<div id="home-conent-box-inner">
<div id="home-heading" class="animated zoomIn">
<h3>Watch Out <br> The Modern Responsive Website!
</h3>
</div>
<div id="home-btn" class="animated zoomIn">
<a class="btn btn-lg btn-general btn-white" href="#work" role="button" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>