CSS metaphysics: WHY is page vertical alignment so difficult?

Question

Relative to the page, horizontal alignment in CSS is easy - a `margin:0 auto` gets you by much of the time, and a `text-align:center` for some other cases.My question to the gurus is not how to vertically align, but **why** is it so much more difficult? Why isn't there `margin:auto 0`? I mean, from a programming perspective.Theoretically, it seems like the same algorithms would apply to both types of centering.

Answer 1

It may not be quite as difficult as you think if you use flexbox.

Flexbox is a built-in CSS tool that allows you to more easily format layouts, grids and alignment.

To use it you would specify that the parent (or container) div is a flexbox. Then you would use some of the goodies inside flexbox to center the content vertically and horizontally. See Markup & CSS below:

<div class="flexDiv">

<p> Center Me </p>

</div>

<style>

.flexDiv {

width: 100%;

height: auto;

display: flex;

justify-content: center;

align-items: center;

}

</style>

And that should do it. If you copy this code above you should see the paragraph tag centered in the middle of the div on both axes. If you don't, you may need to give the div an explicit pixel amount for height & width.

I could tell you which one is which (horizontal vs. vertical) but I recommend you play around with it yourself.

IMPORTANT NOTE: Using display:flex; can break some of the previous styling on a block element. It's typically not a problem because all of that styling can be re-done easily in the new flex div.

Answer 2

Here's my speculative answer as a former print designer turned web designer:

Because web layouts were inspired by print layouts, basic print layouts.

In basic, simple print layouts you rarely see vertically aligned objects. If anything, you see more elements weirdly aligned and positioned on a page that initially you might think they were randomly placed, only to find out that they are actually laid out based on some type of grid.

So the CSS developers, when trying to mimic print layouts never saw vertically aligned elements so they never developed, or better yet, proposed, to use a similar method as margin: 0 auto; to vertically align.

Then Flexbox came around and fixed this for us, thank God.

BTW, I've asked myself the same exact question.