CSS: Vertical-align - html

Question

How to vertical-align without using display table/table-cell or position absolute ?
#parent {
border: 1px solid red;
height: 100vh;
}
.child {
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>

Answer 1

Here is an another option using "Flex" property.
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
#parent {
border: 1px solid red;
display: flex;
align-items: center;
height: 100vh;
}
.child {
border: 1px solid blue;
flex-grow: 1;
}
Codepen demo link

Answer 2

You can use position relative, with top of 50% and a translation of -50%.
#parent {
border: 1px solid red;
height: 100vh;
}
.child {
position: relative;
top: 50%;
transform: translate(0,-50%);
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>

Answer 3

Another method could be to use a floater div
#parent {
border: 1px solid red;
height: 100vh;
}
.floater {
float:left;
height:50%;
width:100%;
margin-bottom: -25px;
}
.child {
border: 1px solid blue;
clear: both;
height:50px;
}
<div id="parent">
<div class="floater"></div>
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>

Answer 4

You can try using display:flex.
CSS
#parent {
border: 1px solid red;
height: 100vh;
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
.child {
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>

Answer 5

You can use display:flex;:
#parent {
border: 1px solid red;
height: 100vh;
display:flex;
align-items:center;
justify-content:center;
}

Answer 6

You can use like that I think
position: fixed; top: 50%;

Answer 7

if you do not mind browser compatibility I would go with flex - see #rblarsen, #Satheesh Kumars answers.
but if you need to expand browser support, here is a more complex but rather solid solution : tested IE9+ FF Chrome and other major browsers...
check out this fiddle : https://jsfiddle.net/kLLz0nm2/
HTML
<div class="wrapper">
<div class="content">Middle aligned</div>
<div class="middle"></div>
</div>
CSS
.wrapper{
width : 100%;
height : 100%;
text-align: center;
}
.content{
display: inline-block;
vertical-align: middle;
}
.middle{
height: 100%;
display: inline-block;
vertical-align: middle;
}
P.S - the above translate solution while fairly simple can sometimes cause poor rendering issues, check out :