Home How do I vertically center text with CSS?

# How do I vertically center text with CSS?

user9473
1#
user9473 Published in September 19, 2018, 11:38 am

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 do this?

• possible duplicate of How do I center text vertically with css – leonbloy Jan 14 '12 at 21:38
• possible duplicate of Best way to center a <div> on a page vertically and horizontally? – Dan Dascalescu Jul 11 '15 at 10:09
• W3C reference: w3.org/Style/Examples/007/center.en.html – nu everest Aug 17 '16 at 23:01
• Modern way: use flex – Mistalis Feb 23 '17 at 16:15
• Code snippets on this page will work for you: codepuran.com/web-designing/… – Akshay Pethani May 28 '17 at 7:42