Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.

.outer { display: table; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .middle { display: table-cell; vertical-align: middle; } .inner { margin-left: auto; margin-right: auto; width: 400px; /* Whatever width you want */ }

View A Working Example With Dynamic Content

I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it. It should work well for centered overlays also -- lightbox, pop-up, etc.

---

The simplest way would be the following three lines of CSS:

1) position: relative;

2) top: 50%;

3) transform: translateY(-50%);

Following is an example:

div.outer-div { height: 170px; width: 300px; background-color: lightgray; } div.middle-div { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

---

One more I can't see on the list:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

Cross-browser (including Internet Explorer 8 - Internet Explorer 10 without hacks!)

Responsive with percentages and min-/max-

Centered regardless of padding (without box-sizing!)

height must be declared (see Variable Height)

Recommended setting overflow: auto to prevent content spillover (see Overflow)

_{Source: Absolute Horizontal And Vertical Centering In CSS}

---

Now the Flexbox solution is a very easy way for modern browsers, so I recommend this for you:

.container { display: flex; align-items: center; justify-content: center; height: 100%; background: green; } body, html { height: 100%; }

---

Actually, you need two div's for vertical centering. The div containing the content must have a width and height.

#container { position: absolute; top: 50%; margin-top: -200px; /* Half of #content height */ left: 0; width: 100%; } #content { width: 624px; margin-left: auto; margin-right: auto; height: 395px; border: 1px solid #000000; }

Here is the result.

---

Edit 2020: only use this if you need to support old browsers like Internet Explorer 8 (which you should refuse to do 😉). If not, use Flexbox.

This is the simplest method I found and I use it all the time (jsFiddle demo here).

Thank Chris Coyier from CSS Tricks for this article.

html, body{ height: 100%; margin: 0; } .v-wrap{ height: 100%; white-space: nowrap; text-align: center; } .v-wrap:before{ content: ""; display: inline-block; vertical-align: middle; width: 0; /* adjust for white space between pseudo element and next sibling */ margin-right: -.25em; /* stretch line height */ height: 100%; } .v-box{ display: inline-block; vertical-align: middle; white-space: normal; }

Support starts with Internet Explorer 8.

---

After a lot of research I finally found the ultimate solution. It works even for floated elements. View Source

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

---

Use the CSS Flexbox align-items property to achieve this.

html, body { height: 100%; } body { display: flex; align-items: center; }

---

To center the div on a page, check the fiddle link.

#vh { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .box{ border-radius: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); padding: 25px; width: 100px; height: 100px; background: white; }

Another option is to use flex box, check the fiddle link.

.vh { background-color: #ddd; height: 400px; align-items: center; display: flex; } .vh > div { width: 100%; text-align: center; vertical-align: middle; }

Another option is to use a CSS 3 transform:

#vh { position: absolute; top: 50%; left: 50%; /*transform: translateX(-50%) translateY(-50%);*/ transform: translate(-50%, -50%); } .box{ border-radius: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); padding: 25px; width: 100px; height: 100px; background: white; }

---

The easiest solution is below:

.outer-div{ width: 100%; height: 200px; display: flex; border:1px solid #000; } .inner-div{ margin: auto; text-align: center; border: 1px solid red; }

---

Unfortunately — but not surprisingly — the solution is more complicated than one would wish it to be. Also unfortunately, you'll need to use additional divs around the div you want vertically centered.

For standards-compliant browsers like Mozilla, Opera, Safari, etc. you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell — which can then be vertically centered. For Internet Explorer, you need to position the inner div absolutely within the outer div and then specify the top as 50%. The following pages explain this technique well and provide some code samples too:

Vertical Centering in CSS

Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible) (Archived article courtesy of the Wayback Machine)

There is also a technique to do the vertical centering using JavaScript. Vertical alignment of content with JavaScript & CSS demonstrates it.

---

If someone cares for Internet Explorer 10 (and later) only, use Flexbox:

.parent { width: 500px; height: 500px; background: yellow; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .centered { width: 100px; height: 100px; background: blue; }

Flexbox support: http://caniuse.com/flexbox

---

A modern way to center an element vertically would be to use flexbox.

You need a parent to decide the height and a child to center.

The example below will center a div to the center within your browser. What's important (in my example) is to set height: 100% to body and html and then min-height: 100% to your container.

body, html { background: #F5F5F5; box-sizing: border-box; height: 100%; margin: 0; } #center_container { align-items: center; display: flex; min-height: 100%; } #center { background: white; margin: 0 auto; padding: 10px; text-align: center; width: 200px; }

---

Using flex property of CSS.

Solution #1

.parent { width: 400px; height:200px; background: blue; display: flex; align-items: center; justify-content:center; } .child { width: 75px; height: 75px; background: yellow; }

or by using display: flex; and margin: auto;

Solution #2

.parent { width: 400px; height:200px; background: blue; display: flex; } .child { width: 75px; height: 75px; background: yellow; margin:auto; }

show text center

Solution #3

.parent { width: 400px; height: 200px; background: yellow; display: flex; align-items: center; justify-content:center; }

Using percentage(%) height and width.

Solution #4

.parent { position: absolute; height:100%; width:100%; background: blue; display: flex; align-items: center; justify-content:center; } .child { width: 75px; height: 75px; background: yellow; }

---

Centering only vertically

If you don't care about Internet Explorer 6 and 7, you can use a technique that involves two containers.

The outer container:

should have display: table;

The inner container:

should have display: table-cell;

should have vertical-align: middle;

The content box:

should have display: inline-block;

You can add any content you want to the content box without caring about its width or height!

Demo:

body { margin: 0; } .outer-container { position: absolute; display: table; width: 100%; /* This could be ANY width */ height: 100%; /* This could be ANY height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; } .centered-content { display: inline-block; background: #fff; padding: 20px; border: 1px solid #000; }

See also this Fiddle!

Centering horizontally and vertically

If you want to center both horizontally and vertically, you also need the following.

The inner container:

should have text-align: center;

The content box:

should re-adjust the horizontal text-alignment to for example text-align: left; or text-align: right;, unless you want text to be centered

Demo:

body { margin: 0; } .outer-container { position: absolute; display: table; width: 100%; /* This could be ANY width */ height: 100%; /* This could be ANY height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding: 20px; border: 1px solid #000; }

See also this Fiddle!

---

.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* (x, y) => position */ -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ } .vertical { position: absolute; top: 50%; //left: 0; transform: translate(0, -50%); /* (x, y) => position */ } .horizontal { position: absolute; //top: 0; left: 50%; transform: translate(-50%, 0); /* (x, y) => position */ } div { padding: 1em; background-color: grey; color: white; }

Related: Center a Image

---

This is always where I go when I have to come back to this issue.

For those who don't want to make the jump:

Specify the parent container as position:relative or position:absolute. Specify a fixed height on the child container. Set position:absolute and top:50% on the child container to move the top down to the middle of the parent. Set margin-top:-yy where yy is half the height of the child container to offset the item up.

An example of this in code:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

---

It can be done in two ways

body{
left: 50%; 
top:50%; 
transform: translate(-50%, -50%); 
height: 100%; 
width: 100%; 
}

OR

Using flex

body {
    height:100%
    width:100%
    display: flex;
    justify-content: center;
    align-items: center;
}

align-items:center; makes the content vertically center

justify-content: center;makes the content horizontally center

---

I just wrote this CSS and to know more, please go through: This article with vertical align anything with just 3 lines of CSS.

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

---

For newcomers, please try:

display: flex;
align-items: center;
justify-content: center;

---

The three lines of code using transform works practically on modern browsers and Internet Explorer:

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

I am adding this answer since I found some incompleteness in the previous version of this answer (and Stack Overflow won't allow me to simply comment).

'position' relative messes up the styling if the current div is in the body and has no container div. However 'fixed' seems to work, but it obviously fixes the content in the center of the viewport Also I used this styling for centering some overlay divs and found that in Mozilla all elements inside this transformed div had lost their bottom borders. Possibly a rendering issue. But adding just the minimal padding to some of them rendered it correctly. Chrome and Internet Explorer (surprisingly) rendered the boxes without any need for padding

---

CSS Grid

body, html { margin: 0; } body { display: grid; min-height: 100vh; align-items: center; }

---

The answer from Billbad only works with a fixed width of the .inner div. This solution works for a dynamic width by adding the attribute text-align: center to the .outer div.

.outer { position: absolute; display: table; width: 100%; height: 100%; text-align: center; } .middle { display: table-cell; vertical-align: middle; } .inner { text-align: center; display: inline-block; width: auto; }

---

Just do it: Add the class at your div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

And read this article for an explanation. Note: Height is necessary.

---

.center{
    display: grid;
    place-items: center;
}

---

Not answering for browser compatibility but to also mention the new Grid and the not so new Flexbox feature.

Grid

From: Mozilla - Grid Documentation - Align Div Vertically

Browser Support: Grid Browser Support

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Browser Support: Flexbox Browser Support

CSS:

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

---

I did it with this (change width, height, margin-top and margin-left accordingly):

.wrapper {
    width: 960px;
    height: 590px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -295px;
    margin-left: -480px;
}

<div class="wrapper"> -- Content -- </div>

---

I think a solid solution for all browsers without using Flexbox - "align-items: center;" is a combination of display: table and vertical-align: middle;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* Optional */
    height: 100%; /* Optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣Demo: https://jsfiddle.net/6m640rpp/

---

Especially for parent divs with relative (unknown) height, the centering in the unknown solution works great for me. There are some really nice code examples in the article.

It was tested in Chrome, Firefox, Opera, and Internet Explorer.

/* This parent can be any width and height */ .block { text-align: center; } /* The ghost, nudged to maintain perfect centering */ .block:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } /* The element to be centered, can also be of any width and height */ .centered { display: inline-block; vertical-align: middle; width: 300px; }

---

The contents can be easily centered by using Flexbox. The following code shows the CSS for the container inside which the contents needs to be centered:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

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

    align-items: center;
}

---