Why is there no easy was to vertically center in css?

Question

I was searching around for a way to vertically center a div in a container. I found a few different ways, but all of them seemed to be very "hacky".

My question is, why is there not just a css property, such as align-vertical that can simply be set to center to center the content? It seems like adding this to css would make so many things much easier.

I am assuming there must be a reason why something like this is not implemented, and I would like to hear if anyone has any idea why.

Answer 1

It's because how browsers traditionally work.

In a browser, by default, the content scrolls vertically. The viewport width is well defined (width of the device), but the viewport height can be one or two times the height of the device, or can even be infinite (as in infinite scrolling).

Traditionally blocks were meant to be horizontally oriented. You place a div and it's automatically occupying 100% of the width of the parent. But its height value is contrained to its content.

If you do

.mydiv {
  background: red;
  width: 100%;
  height: 100%
}

Nothing changes, since divs have already 100% of width, and it can't calculate the height, since it doesn't know how far the viewport will go. You need to add:

html, body {
  height: 100%;
}

to tell the browser to use the device height as the 100% value.

That's why horizontal center is easy: you know what the boundaries are, and how to center the element. But vertical center is more complicated, that's why (before flexbox), you need to resort to absolute positioning or hacks.

Flexbox allows you to render content horizontally or vertically, so it's prepared to handle centering along two axes.

If you want to read more about this, I suggest the spec:

• Visual formatting model
• Visual formatting model details

Answer 2

#outerDiv{
  display:flex;
  width:100%;
  height:200px;
  background:#ccc;
  align-items:center;
}
#innerDiv {
  background:#aaa;
  width:80%;
  margin:0 auto;
}

<div id="outerDiv"><div id="innerDiv">Hello</h1></div>

Run the script and the div remain in the center.
You can mix and match the combination like this. Earlier you need to play with the height of the parent container and self height.
But with flex it becomes easy.