How can I vertically align elements in a div?

Question

I have a div with two images and an h1. All of them need to be vertically aligned within the div, next to each other. One of the images needs to be absolute positioned within the div.

What is the CSS needed for this to work on all common browsers?

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

Obryan

I made a list of all ways to vertical align..I am going to leave it here: jsfiddle.net/techsin/FAwku/1 – Greenhouse

Here are two simple methods to center an element within a div, vertically, horizontally or both (pure CSS): https://mcmap.net/q/36332/-vertically-center-two-elements-within-a-div-duplicate – Braley

margin-top: auto and margin-bottom: auto (Works for alot of cases). – Valdivia

Answer 1

Wow, this problem is popular. It's based on a misunderstanding in the vertical-align property. This excellent article explains it:

Understanding vertical-align, or "How (Not) To Vertically Center Content" by Gavin Kistner.

“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.

---

In a nutshell _{^{(and to prevent link rot)}}:

• Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example
• For block elements, vertical alignment is harder and strongly depends on the specific situation:
  • If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example
  • If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example
  • … there are more such special cases.

Electrician

The problem with the "valid" solutions (so not the vertical-align: middle) is that you have to specify a fixed height. Not very possible for Responsive Web Design. – Cichocki

I had this structure: <div height="##px"> My Text </ div> Worked for me set the property lineHeight using the same value as used in div height property: '##px' (## because this value is dynamic in my case) thank you – Englebert

This also works with inline-block and table-cell elements. If you are having issues with this, try adjusting line-height of the container element (i.e. context) since it is used in the vertical-align line box calculations. – Onceover

css-tricks.com/centering-css-complete-guide <-- some good options presented here, have found myself resorting to the table/table-cell solution most of the time though – Jerrybuilt

Understanding vertical-align, or "How (Not) To Vertically Center Content could have done better with the latest standards. All modern browsers now support transform: translateY(-50%) (although you still have to add the prefix like webkit, mz etc). Using this instead of margin-top: -yy would be a better fit. – Ozone

@DazzleR “Understanding vertical-align, or "How (Not) To Vertically Center Content” predates the latest standard (rather, its adoption) by more than a decade. ;-) — I’d add it, but other answers already include it. – Electrician

@KonradRudolph There is no denying that it predates even my puberty! :-P It is just that things will be much easier for newbies if green ticked answer would contain answer with updated standards, don't you think? – Ozone

The options listed on the link don't work if your inner element is an image. jsfiddle.net/rhvqd52c – Correctitude

@GauravJain Sure does: make it inline and give it vertical-align: middle, or keep it block and set its margin-top. Your example is mixing block-level and inline-level alignment hints. <img> isn’t special in any way, it behaves like any other element here. – Electrician

This tool (howtocenterincsss.com) is pretty awesome because it worked right out of the box inside my existing CSS! That is super rare. Remember the old days where you had to copy entire stylesheets from some example, sometimes even the example HTML an then remove and rename elements one after each other until it's what I needed. Not the case for this site! – Greeneyed

@koks der drache: howtocenterincss.com, not howtocenterincsss.com – Pomeranian

The link in the answer also mentions <div style="display:table-cell; vertical-align:middle"> ... </div>. – Lazes

@yivi The link works for me (and it’s educational!), please don’t remove it. (Maybe you have a browser plugin that forces HTTPS? The link is unfortunately HTTP only.) – Electrician

Answer 2

Now that Flexbox support is increasing, this CSS applied to the containing element would vertically center all contained items (except for those items that specify the alignment themselves, e.g. align-self:start)

.container {
    display: flex;
    align-items: center;
}

Use the prefixed version if you also need to target Internet Explorer 10, and older (< 4.4 (KitKat)) Android browsers:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

Keilakeily

A nice solution, thank you. Can you suggest how to make flexbox display a horizontal scrollbar, in case the inner element is bigger than the container? (I'm trying to make inner element zoomable/scrollable within the container, like canvas in powerpoint)? Is it possible at all? – Socket

@YazidErman this solution depends on flexbox so no, only IE 10 and above support or any other modern browser caniuse.com/#search=flexbox Flexbox is great where it's supported but that's not everywhere. The display table and table cell is probably the best solution really, container just needs to be table, element being centered is wrapped an element with display table cell then can just center as some other answers here point out. – Jerrybuilt

Why was this so hard for me to find >.< thanks for the answer! Can confirm this is working for me in a scenario where other answer did not work. – Boonie

Useful CSS tricks guide on flexbox then look at the align-items section – Kass

Answer 3

I used this very simple code:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

Obviously, whether you use a .class or an #id, the result won't change.

Astigmatism

Here's a full example of all nine possibilities of alignments (top-middle-bottom and left-center-right): jsfiddle.net/webMac/0swk9hk5 – Kindle

Answer 4

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Silkweed

I think this solution is the quickest and easiest to understand. Perhaps it's because I wasn't patient enough to grok the selected answer. Flexbox all the things! – Diaphaneity

The addition of justify-content: center fixed my lack of horizontal centering – Hawsehole

Why do we need a combination of 2 styles to make vertical alignment working in all screen size? If I use only display:flex and resize my screen, the vertical alignment is lost however if both display and align-items are used it works. – Fite

Answer 5

It worked for me:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

Kragh

So it's no longer "block" element? – Lepidopterous

Then if you want to horizontal align with margin : 0 auto, it won't work because of the display: table-cell – Annapurna

Answer 6

Vertically and horizontally align element

Use either of these. The result would be the same:

1. Bootstrap 4
2. CSS3

1. Bootstrap 4.3+

For vertical alignment: d-flex align-items-center

For horizontal alignment: d-flex justify-content-center

For vertical and horizontal alignment: d-flex align-items-center justify-content-center

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center container">
  <div>I am in Center</div>
</div>

2. CSS 3

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container center">
    <div>I am in Center</div>
</div>

Federalist

Both ways are basically the same since Bootstrap uses the same flex attributes in it's classes. – Finfoot

Bootstrap isn't magic. It's subject to the very same CSS limitations affecting everyone. It's just hiding what it does from the avg. user. – Leftwards

Answer 7

A technique from a friend of mine:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

Demo here.

Sarsaparilla

this technique is described in more detail here: css-tricks.com/centering-in-the-unknown – Kinglet

Answer 8

To position block elements to the center (works in Internet Explorer 9 and above), it needs a wrapper div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

Ethno

This method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to set the perspective of the element. transform: perspective(1px) translateY(-50%); – Mesnalty

Answer 9

Use this formula, and it will work always without cracks:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Awesome

I've never seen in css this kind of selector "#outer[id]". What should that do? What if I will have class instead of id? – Olvera

Answer 10

Almost all methods needs to specify the height, but often we don't have any heights.

So here is a CSS 3 three-line trick that doesn't require to know the height.

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

It's supported even in Internet Explorer 9.

with its vendor prefixes:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Source: Vertical align anything with just 3 lines of CSS

Christcross

but this seems work only when the height of element's parent is fixed. the property 'top' with percentage value only works in the container with fixed height, correct? – Yearlong

Yes it works only for some cases, I had problems later with this methods... The thing is to have the most possibilities as possible and as soon as you need one you test all of them until you get the good one, because all methods got things that won't works in a specific case... – Christcross

Answer 11

All of them need to be vertically aligned within the div

Aligned how? Tops of the images aligned with the top of the text?

One of the images needs to be absolute positioned within the div.

Absolutely positioned relative to the DIV? Perhaps you could sketch out what you're looking for...?

fd has described the steps for absolute positioning, as well as adjusting the display of the H1 element such that images will appear inline with it. To that, i'll add that you can align the images by use of the vertical-align style:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

...this would put the header and images together, with top edges aligned. Other alignment options exist; see the documentation. You might also find it beneficial to drop the DIV and move the images inside the H1 element - this provides semantic value to the container, and removes the need to adjust the display of the H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

Christoffer

Answer 12

Four ways to to align child(div) in center.

• Absolute positioning method
• Flexbox method
• Transform/translate method
• CSS grid method

Browser support for CSS grid

Demo

/* Absolute Positioning Method */
.parent1 {
  background: darkcyan;
   width: 150px;
   height: 150px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* Flexbox Method */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  width: 150px;
  height: 150px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* Transform/Translate Method */
.parent3 {
  position: relative;
  width: 150px;
  height: 150px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* CSS grid */
.parent4, .parent5 {
  position: relative;
  width: 150px;
  height: 150px;
  background: darkcyan;
  display: grid;
  place-items: center;
}
.child4, .child5 {
  background: white;
  height: 30px;
  width: 30px;
}
.parent5 {
  display: grid;
  justify-items: centre;
  align-content: centre;
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>
<hr />

<div class="parent4">
  <div class="child4"></div>
</div>
<hr />

<div class="parent5">
  <div class="child5"></div>
</div>

Isador

Answer 13

My trick is to put a table inside the div with one row and one column, set 100% of width and height, and the property vertical-align:middle:

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/

Mckamey

This seems the best way to avoid a lot of head-scratching. I'm still confused as to why CSS doesn't have a vertical align standard. – Fahland

Answer 14

Using display flex, first you need to wrap the container of the item that you want to align:

<div class="outdiv">
    <div class="indiv">
        <span>test1</span>
        <span>test2</span>
    </div>
</div>

Then apply the following CSS content to wrap div or outdiv in my example:

.outdiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

Tharp

Code only answers are discouraged. Please add some explanation as to how this solves the problem, or how this differs from the existing answers. From Review – Ingrained

Answer 15

Using CSS to vertical center, you can let the outer containers act like a table, and the content as a table cell. In this format your objects will stay centered. :)

I nested multiple objects in JSFiddle for an example, but the core idea is like this:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

.circle {
  /* Act as a table so we can center vertically its child */
  display: table;
  /* Set dimensions */
  height: 200px;
  width: 200px;
  /* Horizontal center text */
  text-align: center;
  /* Create a red circle */
  border-radius: 100%;
  background: red;
}

.content {
  /* Act as a table cell */
  display: table-cell;
  /* And now we can vertically center! */
  vertical-align: middle;
  /* Some basic markup */
  font-size: 30px;
  font-weight: bold;
  color: white;
}

The multiple objects example:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Result

https://jsfiddle.net/martjemeyer/ybs032uc/1/

Croupier

Answer 16

I have found a new workaround to vertically align multiple text-lines in a div using CSS 3 (and I am also using bootstrap v3 grid system to beautify the UI), which is as below:

.immediate-parent-of-text-containing-div {
    height: 50px;         /* Or any fixed height that suits you. */
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

As per my understanding, the immediate parent of text containing element must have some height.

Trichromat

Answer 17

By default h1 is a block element and will render on the line after the first img, and will cause the second img to appear on the line following the block.

To stop this from occurring you can set the h1 to have inline flow behaviour:

#header > h1 { display: inline; }

As for absolutely positioning the img inside the div, you need to set the containing div to have a "known size" before this will work properly. In my experience, you also need to change the position attribute away from the default - position: relative works for me:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

If you can get that to work, you might want to try progressively removing the height, width, position attributes from div.header to get the minimal required attributes to get the effect you want.

UPDATE:

Here is a complete example that works on Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>Example of vertical positioning inside a div</title>
            <style type="text/css">
                #header > h1 { display: inline; }
                #header { border: solid 1px red; 
                          position: relative; }
                #img-for-abs-positioning { position: absolute;
                                           bottom: -1em; right: 2em; }
            </style>
        </head>
    
        <body>
            <div id="header">
                <img src="#" alt="Image 1" width="40" height="40" />
                <h1>Header</h1>
                <img src="#" alt="Image 2" width="40" height="40" 
                     id="img-for-abs-positioning" />
            </div>
        </body>
    </html>

Tablecloth

I should note that having the right DOCTYPE can sometimes make big differences to how CSS will render, especially on Internet Explorer. I'd recommend you chose a DOCTYPE known to align with a strict standards mode so you can expect more consistent behaviour between browsers. – Tablecloth

I wouldn't 'expect' any consistency between browsers.. only way to be sure is to test :/ – Schaaff

Answer 18

We may use a CSS function calculation to calculate the size of the element and then position the child element accordingly.

Example HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

And CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;
}

.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}

a {
    color: white;
    text-decoration: none;
}

Demo created here: https://jsfiddle.net/xnjq1t22/

This solution works well with responsive div height and width as well.

Note: The calc function is not tested for compatiblity with old browsers.

Oswaldooswalt

Answer 19

Using only a Bootstrap class:

• div: class="container d-flex"
• element inside div: class="m-auto"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container d-flex mt-5" style="height:110px; background-color: #333;">
  <h2 class="m-auto"><a href="https://hovermind.com/">H➲VER➾M⇡ND</a></h2>
</div>

Complication

Answer 20

My new favorite way to do it is with a CSS grid:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

Lovegrass

Answer 21

Just use a one-cell table inside the div! Just set the cell and table height and with to 100% and you can use the vertical-align.

A one-cell table inside the div handles the vertical-align and is backward compatible back to the Stone Age!

Southsoutheast

Answer 22

I have been using the following solution (with no positioning and no line height) for over a year. It works with Internet Explorer 7 and Internet Explorer 8 as well.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

Sciential

Answer 23

This is my personal solution for an i element inside a div.

JSFiddle Example

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

Conurbation

Answer 24

For me, it worked this way:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

The "a" element converted to a button, using Bootstrap classes, and it is now vertically centered inside an outer "div".

Huppert

Answer 25

I tried to do it using CSS flex but it truncates the object if it goes beyond the block (with "overflow: auto").

Through experimentation, I discovered that it is very easy to center any object (line or block) if you use Grid.

I really liked the solution, so I implemented it in the CMS Effcore.

Here is a code example:

<head>
    <style>
        [data-id^='example-'] {
          max-width: 800px;
          height: 200px;
          margin: 20px auto;
          background: gray;
        }
        [data-id^='example-'] img {
          width: 50px;
          height: 50px;
          border: 1px solid black;
          background: gray;
        }
    </style>
</head>
<body>
    <div data-id="example-1">
        <img src="gallery/pictures/thumbnail-01.png">
    </div>
    <div data-id="example-2">
        <img src="gallery/pictures/thumbnail-01.png">
    </div>
    <div data-id="example-3">
        <img src="gallery/pictures/thumbnail-01.png">
    </div>
</body>
</html>

Example via Grid:

/*
┌─────┬───────────────────────┬─────┐
│ 1fr │          1fr          │ 1fr │
├─────┼───────────────────────┼─────┤
│     │  ▲                    │     │
│     │ ◀┼──────────────────▶ │     │
│ 1fr │  │ 1px|max-content    │ 1fr │
│     │  │                    │     │
│     │  ▼                    │     │
├─────┼───────────────────────┼─────┤
│ 1fr │          1fr          │ 1fr │
└─────┴───────────────────────┴─────┘
*/

[data-id='example-1'] {
  display: grid;
  grid-template-columns: 1fr minmax(1px, max-content) 1fr;
  grid-template-rows   : 1fr minmax(1px, max-content) 1fr;
}

[data-id='example-1'] img {
  grid-column-start: 2;
  grid-row-start:    2;
}

Example via "flex".

[data-id='example-2'] {
  display: flex;
  align-items: center;
}

[data-id='example-2'] img {
  margin: 0 auto;
}

Example via "vertical-align".

[data-id='example-3'] {
  text-align: center;
  white-space: nowrap;
}

[data-id='example-3']:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

[data-id='example-3'] img {
  vertical-align: middle;
}

A live code example can be found here: https://developer.mozilla.org/ru/play?id=AE9iTZBMsHnSmr4lfRPvmQU3p6DMFO4uGxZY%2BM7ABDgHuUotnvJdG5VISHO5%2BkYdb7YGTMQtKr2HlhGc

Hexangular

Answer 26

Just this:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

A one-cell table inside the div handles the vertical-align and is backward compatible back to the Stone Age!

Southsoutheast

Answer 27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Durstin

Answer 28

Here is just another (responsive) approach:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Curvilinear

Answer 29

<div id="header" style="display: table-cell; vertical-align:middle;">

...

or CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Browser Coverage

Determinant

The vertical-align property does not apply since the div is display: block by default and nothing appears to have been done to change it. – Nonrigid

Apparently the display was updated to table-cell, which makes vertical-align: middle; work. Even better, it works without needing a nested wrapper/buffer div, and it works for both text and images (or both), and you don't need to change the position properties. – Jessamyn

This one works. It changes the display to table-cell which takes the vertical-align property. No idea why people vote this down. – Explication

yes, as far as i know this is the least intrusive way to center anything verticaly in a div. +1 – Toponym

Ok, maybe i was too quick with my conclusions... Adding display:table-cell breakes div margin and additionaly border is displayed outside div, border combined with border-radius displays rounded corners inside of the div istead of outside – Toponym

on certain occasions there may one extra outer div required with style display:table – Chickamauga