Hacker News Reader

Comment by mxuribe | Hacker News Reader

"...centering an object horizontally and vertically consistently is still a surprisingly difficult endeavor..." This is so true - even today. Oh wait, someone might state, "but there are frameworks you can simply integrate and they handle that kind of stuff for you, or at least make it easier"...To which I reply, do i really have to include ~500K - 1MB of some framework for this!?! Just silly that centering is an annoying task nowadays.

View on HN

> To which I reply, do i really have to include ~500K - 1MB of some framework for this!?!

What framework?

    .center-the-stuff {
      display: flex;
      align-items: center;
      justify-content: center;
    }

here's a non-flexbox solution, but the parent element has to have a set height:

  .parent {
    position: relative;
  }

  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

It's like a magic spell that makes very little sense and is impossible to guess.

If I fire up a reasonable layout system (Xaml for example) which is completely foreign, it's trivial to do there.

I can't understand why html/CSS makes it so hard.

Because html/css was never intended to be used for layout. It's primarily a content styling system for static documents.

Html/CSS have been revised a few times since then, so you'd think that the design should gravitate towards making the common things easy.

That was a true statement in maybe 2005?

That was so easy with tables.

At the cost of poor performance on the client [1], so you're just pushing any time saved in development onto your user.

The only way around the poor performance of table layouts is to use table-layout: fixed, which then means you lose all responsive layout so you'd need to create a new version for every screen size you wanted to support (and implicitly, not be able to support every size of mobile screen since percentages don't play well with fixed layout. In this case, you haven't saved any time and in fact have created more work for yourself along with a worse version of your site since fewer people will be able to view it properly.

[1] http://www.stubbornella.org/content/2009/03/27/reflows-repai...

If you can afford not to support IE9 [1], you don't need a 500K - 1MB framework to center vertically and horizontally by using flexbox (align-items: center; justify-content: center) on the parent container.

[1] http://caniuse.com/#feat=flexbox

I am looking forward to the day when I don't have to support ie9

Fortunately this is not much of an issue because IE is on its well deserved way of dinosaurs and Dodo the bird (my sympathies to those who can't get rid of it because of some dated corporate standards) and Edge doesn't seem to have much impact either. It would fill me with endless joy years back had I known its fate and the success MS will have in next computing platform (mobile). Good riddance!

Or you can support it but not give them vertically centered content. Screw em. If they want it to be 5 years ago, let them be 5 years ago. FIVE!

I like to call this degrading gracefully :)

Or you can use a table and get on with your life.

Or `display: table` and `display: table-cell` so you can use a `<div>` instead of the dreaded `<table>` tag.

Reply on news.ycombinator.com