I have a <div> element which contains text and I want to align the contents of this <div> vertically center.
Here is my <div> style:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
What is the best way to achieve this goal?
37 Answers
You can try this basic approach:
div {
height: 100px;
line-height: 100px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
It only works for a single line of text though, because we set the line's height to the same height as the containing box element.
A more versatile approach
This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:
div {
height: 100px;
line-height: 100px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Hello World!</span>
</div>
The CSS just sizes the <div>, vertically center aligns the <span> by setting the <div>'s line-height equal to its height, and makes the <span> an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the <span>, so its contents will flow naturally inside the block.