How do I vertically align text in a div?

Question

I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 1

You need to add the line-height attribute and that attribute must match the height of the div. In your case:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

In fact, you could probably remove the height attribute altogether.

This only works for one line of text though, so be careful.

Answer 2

Update - Here's a great resource

http://howtocenterincss.com/

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.

Update - Using Flexbox

Inline with keeping this post up to date with the latest tech, here's a much easier way to center something using flexbox. Flexbox isn't supported in IE9 and lower.

Here's some great resources:

• A guide to flexbox
• Centering elements with flexbox
• IE10 syntax for flexbox
• Support for Flexbox

jsfiddle with browser prefixes

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

Update - Another solution

This is from zerosixthree and lets you center anything with 6 lines of css

This method isn't supported in IE8 and lower

jsfiddle

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Previous answer

Simple and cross browser approach, useful as links in the marked answer are slightly outdated.

How to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or css line heights. No matter how much text you have you won't have to apply any special classes to specific lists or divs (the code is the same for each). This works on all major browsers including IE9, IE8, IE7, IE6, Firefox, Chrome, Opera and Safari. There are 2 special stylesheets (1 for IE7 and another for IE6) to help them along due to their css limitations which modern browsers don't have.

Andy Howard - How to vertically and horizontally center text in an unordered list or div

Edit: As I didn't care much for IE7/6 for the last project I worked on, I used a slightly stripped down version (i.e. removed the stuff that made it work in IE7 and 6). Might be useful for somebody else...

jsfiddle

HTML

<ul>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
</ul>

And the CSS:

.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height: 100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ffffd;
    width: 100px;
    height: 100px;
}

Answer 3

UPD: This days (we don't need IE6-7-8 no more) i would just use css display: table for this issue

.vcenter{
    display: table;
    background:#eee;
    width: 150px;
    height: 150px;
    text-align: center;
}
    
.vcenter :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>
   

---

This is my favorite solution for this issue (simple and very well browser supported):

div{
    margin:5px;
    text-align:center;
    display:inline-block;
}

.vcenter{
    background:#eee;
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
    
.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br />Text<br />Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

Answer 4

Check this simple solution:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 {
   display:table-cell;
   vertical-align:middle;
   height:inherit
}

JSFiddle

Answer 5

Hmm, there're obviously many ways to solve this.

But I have a <div> that's positioned absolutely, height:100% (actually, top:0;bottom:0 and fixed width) and display:table-cell just didn't work to center text vertically. My solution did require an inner span element, but I see many of the other solutions do also, so I might as well add it:

My container is a .label and I want the number vertically centered in it. I did it by positioning absolutely at top:50% and setting line-height:0

<div class="label"><span>1.</span></div>

And the CSS is as follows:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

See it in action: http://jsfiddle.net/jcward/7gMLx/

Answer 6

There are several Tricks to display content/image in center of Div. Some of answers are really nice and I am fully agree with these too.

Absolute Horizontal And Vertical Centering In CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

There are more than 10 techniques with Examples. Now it's up to you which you prefer.

No doubt, display:table; display:table-Cell is a better trick.

Some good Tricks are following:

Trick 1 - By using display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT 
    </div>
  </div>
</div>

CSS Code

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Trick 2 - By using display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT 
  </div>
</div>

CSS code

.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

Trick 3 - By using position:relative;position:absolute

<div style="position: relative; background: #ffffd; border: 1px solid #ffffd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER,<br>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>