How can I vertically center a div element for all browsers using CSS?

css cross-browser alignment vertical-alignment centering

1,687,842

Solution 1

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 */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

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.

Solution 2

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%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

Solution 3

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}

Solution 4

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%;
}

<div class="container">
  <div>Div to be aligned vertically</div>
</div>

Solution 5

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;
}

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Support starts with Internet Explorer 8.

View more solutions

1,687,842

Author by

Dan NoNeed

I'm a frontend and backend developer living in Istanbul, Turkey. I like to use Codeigniter, Laravel, jQuery, HTML5, CSS3 and lots of other web techniques. I spend most of the time on Internet, but on my spare times I like to compose digital music.

Updated on December 14, 2021

Comments

Dan NoNeed over 2 years
I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.
```
<body>
    <div>Div to be aligned vertically</div>
</body>
```
How can I center a div vertically in all major browsers, including Internet Explorer 6?