Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

You can do this already with:

  <div class="container">This is the text</div>

  .container {
    align-items: center
    display: flex;
    justify-content: 
    height: 200px;
  }


Oof, we’ve got be better than this by now.


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

Two of those lines exist to handle each axis separately, the first is to define the layout mode you are using. It doesn't get much simpler while still maintaining a fine level of control over each aspect of the layout. I don't buy that it has to be "better" than this.


Which keyword defines the axis in question?


Justify content and Align items operate on the Main axis and the Cross axis respectively. By default this would be the horizontal and vertical. Because of the flexibility of the layout system you can tell it to distribute the main axis vertically instead (flex-direction: column) which would make the cross access horizontal. There is a consistent logic to this which affords a lot of power when creating layouts.


I’m sorry, this is unacceptable reasoning.

We are owed a better API, let’s get the right people on this.


The current layout system is designed with language (and content) direction preferences in mind. Could you expand on what you think an ideal layout system would be? I'd be interested to see what an alternative would look like with the same considerations.


Two lines

div { display: grid; place-items: center; }


Almost there. CSS spec people if you mingle with the common folk, take a look. Let’s get this down to 1 line.


I mean, 2 could be fine, if it is one for vertical and one for horizontal...


Seems to require also adding text-align: center to work on multiline text to get center-justified text




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: