Central align of elements CSS without flexbox
to use vertical-align:middle
add display:table-cell
on .home-row
and display:table
on .home-container
see here jsfiddle or snippet
html,
body {
height: 100%;
}
.home-row {
vertical-align: middle;
display: table-cell;
}
.home-container {
width: 100%;
height: 100%;
background-color: rgba(139, 0, 0, 0.4);
display: table;
}
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
read more here vertical align
EDIT 2020
There's a better way to achieve the same result using flexbox
Check snippet below
Play around with flexbox
. You can add it on other items not just the container
.home-container {
background: red;
display:flex;
flex-direction: column;
justify-content: center;
height:100vh;
}
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
Try this:
<style>
.home-container {
width: 100%;
height: 800px;
background-color: rgba(139, 0, 0, 0.4);
text-align: center;
}
.some-other-class {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
HTML
<div class="home-container">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>