Signup/Sign In
Ask Question
Not satisfied by the Answer? Still looking for a better solution?

How to vertically center text with CSS?

I have a <div> element that contains text and I am trying to align the contents of this <div> vertically center.


#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?
by

3 Answers

kshitijrana14
You can try this basic approach:
div {
height: 100px;
line-height: 100px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Bharatgxwzm
This answer will run for a particular line and multiple lines of text, but it still needs a fixed top receptacle:
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>
sandhya6gczb
One of the ways to vertically align text is by using flexbox.
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
<div class="center">
<p>Hello world</p>
</div>

Login / Signup to Answer the Question.