Vertical Centering Text in DIV

To center vertically some text inside a div do the following:

1. Create a CSS class for the div that contains the text and named for example "centered"

<div class="centered">some text</div>

2. Then in your stylesheet add the class "centered" and simply set the line-height of the text to be tha same as the height of the div.

.centered{height:40px; line-height:40px;}

* Keep in mind that this works only if the height of the div is fixed.

Thanks for the tips!
I am learning CSS and I've been searching for a simple way to do this for a while

happy to know:)

I'm not an expert with coding but wouldn't "text-align: center;" do the same thing?

edit: ah sorry, I just noticed the instructions was for vertically centering text in a div

Edited by HappyGD, 09 May 2013 - 08:23 PM.

no problem

Thanks so much, could you please tell me what "float" do exactly with left: 50%? do they affect each other directly?

With the flexbox layout module in CSS3, it has become a lot easier to center items vertically in a container. We no longer have to apply the fixed height.

 

Here is an example: 

<section>
  <h3>Hello World!</h3>
</section>

section {
  display:flex;
  height: 100vh;
  align items: center;
}

If you apply this style, the child items of the section will be vertically centered; whatever be the height of container.  

 

 

Here is another method.

<section>
  <h3>Hello World!</h3>
</section>

section {
  height: 100vh;
  position: relative;
}

h3 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

This is another method of vertically centering elements in a container. 

 

 

I prefer the first method because the second method required positioning properties which I don't like to use.