Categories
alignment centering css html vertical-alignment

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

1584

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?

8

  • 28

    @MarcoDemaio Don’t people constantly frown upon tables for layouts on here?

    – Chud37

    Jan 21, 2013 at 15:35

  • 16

    @Chud37: it depends what you have to do, tables for layout are generally not versatile and long to type in code, with css you can easily change a 2 cols layout into a 3/4/5 sols layout etc. But in this case is different, using dozens of css tips-and-tricks for such a simple task that could be accomplished with a perfect cross-browser table, it’s like attempting to enter in your house through the window instead of using the door.

    Jan 24, 2013 at 19:52

  • In case people don’t care about older browser support: davidwalsh.name/css-vertical-center

    Sep 4, 2014 at 10:32

  • 1

    css-vertical-center.com there are some solutions with browser compatibility information

    Feb 4, 2019 at 14:24

  • 3

    Here is lots of ways to do it css-tricks.com/centering-css-complete-guide

    Apr 4, 2019 at 12:45

1514

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.

0

    338

    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>

    9

    • 6

      note: doesn’t work correct if the height of the outer div is set with “min-height: 170px”

      – Bart Burg

      Aug 14, 2015 at 9:10

    • 4

      Interferes with z-index

      – ripper234

      Nov 12, 2016 at 19:48

    • 6

      doesn’t work when height of outer div is 100%. Then only works with position: absolute;.

      Apr 13, 2018 at 8:01

    • 1

      I had found this solution elsewhere first, but extra kudos to this particular answer for mentioning the -webkit-transform variant in particular, which I needed to make this method work in phantomjs… ended hours of struggling so thank you!

      Oct 23, 2018 at 11:02

    • 2

      This is the best answer. This is incredibly simple, messes with the least amount of existing work and functions on everything as far back as IE9 which nobody even uses anymore. Lets get this guy some more upvotes!

      Jun 20, 2019 at 18:40

    307

    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

    0