How to vertically center text with CSS?
I have a div tag which contains text, and I want to align the contents of this div vertically center.
Here is my div style:
#box
{
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
}
<div Id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
What is the best way to do this?
answer :
You can try this basic approach:
div {
height: 90px;
line-height: 90px;
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: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </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.
Simulating table display
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
Using CSS we 'simulate' table display behavior, since tables support vertical alignment:
div {
display: table;
width: 250px;
height: 100px;
text-align: center;
}
span {
display: table-cell;
vertical-align: middle;
}
Using absolute positioning
