How do I vertically center text with CSS?

2412

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:

_x000D_
_x000D_
#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
_x000D_
<div id="box">
  Lorem ipsum dolor sit
</div>
_x000D_
_x000D_
_x000D_

What is the best way to achieve this goal?

This question is tagged with html css vertical-alignment

~ Asked on 2012-01-14 21:25:10

The Best Answer is


2992

You can try this basic approach:

_x000D_
_x000D_
div {_x000D_
  height: 100px;_x000D_
  line-height: 100px;_x000D_
  text-align: center;_x000D_
  border: 2px dashed #f69c55;_x000D_
}
_x000D_
<div>_x000D_
  Hello World!_x000D_
</div>
_x000D_
_x000D_
_x000D_

It only works for a single line of text though, because we set the line's height to the same height as the containing box element.


A more versatile approach

This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:

_x000D_
_x000D_
div {_x000D_
  height: 100px;_x000D_
  line-height: 100px;_x000D_
  text-align: center;_x000D_
  border: 2px dashed #f69c55;_x000D_
}_x000D_
span {_x000D_
  display: inline-block;_x000D_
  vertical-align: middle;_x000D_
  line-height: normal;_x000D_
}
_x000D_
<div>_x000D_
  <span>Hello World!</span>_x000D_
</div>
_x000D_
_x000D_
_x000D_

The CSS just sizes the <div>, vertically center aligns the <span> by setting the <div>'s line-height equal to its height, and makes the <span> an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the <span>, so its contents will flow naturally inside the block.


Simulating table display

And here is another option, which may not work on older browsers that don't support display: table and display: table-cell (basically just Internet Explorer 7). Using CSS we simulate table behavior (since tables support vertical alignment), and the HTML is the same as the second example:

_x000D_
_x000D_
div {_x000D_
  display: table;_x000D_
  height: 100px;_x000D_
  width: 100%;_x000D_
  text-align: center;_x000D_
  border: 2px dashed #f69c55;_x000D_
}_x000D_
span {_x000D_
  display: table-cell;_x000D_
  vertical-align: middle;_x000D_
}
_x000D_
<div>_x000D_
  <span>Hello World!</span>_x000D_
</div>
_x000D_
_x000D_
_x000D_


Using absolute positioning

This technique uses an absolutely positioned element setting top, bottom, left and right to 0. It is described in more detail in an article in Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS.

_x000D_
_x000D_
div {_x000D_
  display: flex;_x000D_
  justify-content: center;_x000D_
  align-items: center;_x000D_
  height: 100px;_x000D_
  width: 100%;_x000D_
  border: 2px dashed #f69c55;_x000D_
}
_x000D_
<div>_x000D_
  <span>Hello World!</span>_x000D_
</div>
_x000D_
_x000D_
_x000D_

~ Answered on 2012-01-14 21:26:33


1334

Another way (not mentioned here yet) is with Flexbox.

Just add the following code to the container element:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Flexbox demo 1

_x000D_
_x000D_
.box {_x000D_
  height: 150px;_x000D_
  width: 400px;_x000D_
  background: #000;_x000D_
  font-size: 24px;_x000D_
  font-style: oblique;_x000D_
  color: #FFF;_x000D_
  text-align: center;_x000D_
  padding: 0 20px;_x000D_
  margin: 20px;_x000D_
  display: flex;_x000D_
  justify-content: center;_x000D_
  /* align horizontal */_x000D_
  align-items: center;_x000D_
  /* align vertical */_x000D_
}
_x000D_
<div class="box">_x000D_
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh_x000D_
</div>
_x000D_
_x000D_
_x000D_

Alternatively, instead of aligning the content via the container, flexbox can also center the a flex item with an auto margin when there is only one flex-item in the flex container (like the example given in the question above).

So to center the flex item both horizontally and vertically just set it with margin:auto

Flexbox Demo 2

_x000D_
_x000D_
.box {_x000D_
  height: 150px;_x000D_
  width: 400px;_x000D_
  background: #000;_x000D_
  font-size: 24px;_x000D_
  font-style: oblique;_x000D_
  color: #FFF;_x000D_
  text-align: center;_x000D_
  padding: 0 20px;_x000D_
  margin: 20px;_x000D_
  display: flex;_x000D_
}_x000D_
.box span {_x000D_
  margin: auto;_x000D_
}
_x000D_
<div class="box">_x000D_
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> _x000D_
</div>
_x000D_
_x000D_
_x000D_

NB: All the above applies to centering items while laying them out in horizontal rows. This is also the default behavior, because by default the value for flex-direction is row. If, however flex-items need to be laid out in vertical columns, then flex-direction: column should be set on the container to set the main-axis as column and additionally the justify-content and align-items properties now work the other way around with justify-content: center centering vertically and align-items: center centering horizontally)

flex-direction: column demo

_x000D_
_x000D_
.box {_x000D_
  height: 150px;_x000D_
  width: 400px;_x000D_
  background: #000;_x000D_
  font-size: 18px;_x000D_
  font-style: oblique;_x000D_
  color: #FFF;_x000D_
  display: flex;_x000D_
  flex-direction: column;_x000D_
  justify-content: center;_x000D_
  /* vertically aligns items */_x000D_
  align-items: center;_x000D_
  /* horizontally aligns items */_x000D_
}_x000D_
p {_x000D_
  margin: 5px;_x000D_
  }
_x000D_
<div class="box">_x000D_
  <p>_x000D_
    When flex-direction is column..._x000D_
  </p>_x000D_
  <p>_x000D_
    "justify-content: center" - vertically aligns_x000D_
  </p>_x000D_
  <p>_x000D_
    "align-items: center" - horizontally aligns_x000D_
  </p>_x000D_
</div>
_x000D_
_x000D_
_x000D_

A good place to start with Flexbox to see some of its features and get syntax for maximum browser support is flexyboxes

Also, browser support nowadays is very good: caniuse

For cross-browser compatibility for display: flex and align-items, you can use the following:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

~ Answered on 2014-03-06 08:15:10


Most Viewed Questions: