How to vertically center text with CSS?

Question

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?

css html

4 years ago by akshay1995

3 Answers

Login / Signup to Answer the Question.

Login Signup

**kshitijrana14** · Answer 1 · 2021-04-23T10:18:42

You can try this basic approach:

div {

  height: 100px;

  line-height: 100px;

  text-align: center;

  border: 2px dashed #f69c55;

}

<div>

  Hello World!

</div>

**Bharatgxwzm** · Answer 2 · 2021-04-23T12:14:59

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** · Answer 3 · 2021-04-30T14:01:58

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>

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

How to vertically center text with CSS?

3 Answers

Login / Signup to Answer the Question.