Most heavily supported methods of vertical alignment?

Question

Until recently I have been using Flexbox to vertically align elements like so:

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

However I have begun working on more and more projects that need to support older browsers which do not support Flexbox e.g. Internet Explorer 8. I would like to begin supporting a much wider range of browsers and devices.

My question is; what are some of the most heavily supported methods of vertical alignment using just HTML and CSS?

In most cases the elements I'm centring will not have fixed heights or widths, generally the width will be a percentage value and the height will be determined by dynamic content.

Thanks in advance.

`position: absolute; top: 0; bottom: 0; left: 0; right: 0;` should do it for nested divs. — Ismael Miguel, Jan 09 '17 at 09:12

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

If you don't have the luxury of knowing the exact size of the box you want to align to the middle, then I usually go with the display:table-* css setup.

Putting the content box into a div with display:table-cell wrapped in a display:table element does the trick. This solution's browser compatibility is pretty good.

Html

<div class="popup">
  <div class="popup-table">
    <div class="popup-table-cell">
      <div class="popup-body">Hello there!</div>
    </div>
  </div>
</div>

Css

.popup{position:fixed;top:0;left:0;bottom:0;right:0;}
.popup-table{display:table;width:100%;height:100%;}
.popup-table-cell{display:table-cell;vertical-align:middle;text-align:center;}
.popup-body{display:inline-block;border:1px solid black;padding:3em;}

Uploaded a code example here: http://codepen.io/anon/pen/NdGpje

** Please note, that the .popup class is a wrapper only, you don't have to use it - it's just to have a simple usecase for middle positioning, and a wrapper element for .popup-table.

Wais Kamal · Answer 2 · 2017-01-09T09:30:13.290

0

Here is a very simple example from CSS Tricks. You can set the elements top margin to 50% and then raise it up by half its height. Here is the code:

body {
  background: #f06d06;
  font-size:  80%;
}

#div1 {
  background: white;
  height:     300px;
  margin:     20px;
  width:      300px;
  position:   relative;
  resize:     vertical;
  overflow:   auto;
}

#div1 div {
  position:   absolute;
  top:        50%;
  left:       20px;
  right:      20px;
  background: black;
  color:      white;
  padding:    20px;
  transform:  translateY(-50%);
  resize:     vertical;
  overflow:   auto;
}

<body>
  <div id="div1">
    <div>
      I'm a block-level element with an unknown height, centered vertically within my parent.
    </div>
  </main>
</body>

edited Jan 09 '17 at 09:30

answered Jan 09 '17 at 09:24

Wais Kamal

5,858
2
17
36

That contains invalid HTML4.01, which is used on IE8. Ref: http://www.w3schools.com/tags/tag_main.asp – Ismael Miguel Jan 09 '17 at 09:28
1

Also, IE8 doesn't support CSS3. Having `transform: translateY(-50%);` won't work. And you seem to have pasted the CSS into the Javascript box. – Ismael Miguel Jan 09 '17 at 09:32

score 0 · Answer 3 · edited May 23 '17 at 12:13

The technique I personally use to vertically align content in a div is with display: table; display: table-cell; and vertical-align:middle; like so:

HTML:

<div class="block">
  <div class="block__module">
    <h1>Title</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo pellentesque est quis mollis. Nulla suscipit risus a ornare viverra. Suspendisse potenti. Phasellus tempor imperdiet ullamcorper. Nam accumsan volutpat tincidunt. Cras eu mauris posuere, imperdiet elit ac, rutrum ligula. Maecenas ullamcorper sit amet nisi vitae consectetur. Sed ultrices lorem a fermentum lacinia.
    </p>
  </div>
</div>

CSS:

.block {
  display:table;
  height: 500px;
  width:100%;
}

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

Here is a fiddle link with my code.

I understand that your content may be dynamic, I am not sure if changing the height of the div to 100% will help and achieve the same result but this way of vertical alignment works in at least IE8 plus. I always declare a height but I understand that this is not something that we can always do.

I found a similar question to this one on SO that may be of help, please see here.

I also came across this handy code generator that may help, please see here. It gives you the choice of filling in some values and generates the best option for vertical alignment.

Most heavily supported methods of vertical alignment?

3 Answers3