The best and easiest way to do it (currently in 2015 2020) is using flexbox:
.parent-selector {
display: flex;
align-items: center;
}
And that’s it 😀
Check-out this working example:
div {
border: 1px solid red;
height: 150px;
width: 350px;
justify-content: center;
/* Actual code */
display: flex;
align-items: center;
}
<div>
<p>Hola</p>
</div>
Old answer: You can use vertical-align: middle if you specify also display: table-cell;
.div {
display: table-cell;
vertical-align: middle;
}
Working example:
div {
border: 1px solid red;
height: 150px;
width: 350px;
text-align: center;
/* Actual code */
display: table-cell;
vertical-align: middle;
}
<div>
<p>Hola</p>
</div>
If it does not work you can try setting its parent as display: table;
:
.parent-selector {
display: table;
}
Edit: You have this method plus all the methods covered on this question in this other question: How do I vertically center text with CSS?