3 ms·

There are two widely known techniques for vertically centering an element in CSS that are virtually supported across the board: display: table-cell; vertic

There are two widely known techniques for vertically centering an element in CSS that are virtually supported across the board: display: table-cell; vertical-align: middle; or position: absolute; top: 50%; transform: translateY(-50%) You can't really complain about that point anymore.

anonbanker 11y ago
so hack it into a table cell, and valign like it's html 4.01 all over again, or render the full page, then reposition content based on that size? am I understanding these techniques correctly?
- daxelrod 11y ago
  There's an important difference between creating a table in your HTML for layout, and using CSS to tell the browser to use its table layout algorithm on a particular element to center it. Yes, it's still inelegant and nonobvious, but it's also better than throwing document semantics out the window.
dheera 11y ago
Exactly, "widely known". Like, CSS is so convoluted to work with, that it's become its own branch of science where people have to research, publish, and circulate these magic concocted strings just to do basic layout tasks like evenly-distributing elements or vertical centering, instead of being able to just RTFM and vertically center something in one simple, easy-to-remember command. It's completely non-intuitive why I would want to make something a "table-cell" or why I would want to "translateY(-50%)" to accomplish vertical centering. And that's only barely scratching the surface of UI design. Doing something like "if(browser width:height ratio is less than 3:2) keep a video in an aspect ratio of 3:2 and vertically-center it on the screen, else make the video width 100% and crop the video evenly on the top and bottom" is arguably a potentially common design task, yet a convoluted headache in CSS. Now add to that, "place an 'X' button in the upper right corner of the video, leaving a 20-pixel margin", and you're downright waging war with your browser. Both of your examples don't work in all situations, by the way.

anonbanker 11y ago

so hack it into a table cell, and valign like it's html 4.01 all over again, or render the full page, then reposition content based on that size? am I understanding these techniques correctly?

daxelrod 11y ago
There's an important difference between creating a table in your HTML for layout, and using CSS to tell the browser to use its table layout algorithm on a particular element to center it. Yes, it's still inelegant and nonobvious, but it's also better than throwing document semantics out the window.

dheera 11y ago

Exactly, "widely known". Like, CSS is so convoluted to work with, that it's become its own branch of science where people have to research, publish, and circulate these magic concocted strings just to do basic layout tasks like evenly-distributing elements or vertical centering, instead of being able to just RTFM and vertically center something in one simple, easy-to-remember command. It's completely non-intuitive why I would want to make something a "table-cell" or why I would want to "translateY(-50%)" to accomplish vertical centering. And that's only barely scratching the surface of UI design. Doing something like "if(browser width:height ratio is less than 3:2) keep a video in an aspect ratio of 3:2 and vertically-center it on the screen, else make the video width 100% and crop the video evenly on the top and bottom" is arguably a potentially common design task, yet a convoluted headache in CSS. Now add to that, "place an 'X' button in the upper right corner of the video, leaving a 20-pixel margin", and you're downright waging war with your browser. Both of your examples don't work in all situations, by the way.