Home/ Questions/Q 5971003
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T20:27:20+00:00

I want to center a div vertically with CSS. I don’t want tables or

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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