4 ms·

> not as easy to figure out what that means exactly I wholeheartedly disagree. When you see the title "centering in CSS" you know exactly what it means. It's t

by unabst 6y ago

> not as easy to figure out what that means exactly I wholeheartedly disagree. When you see the title "centering in CSS" you know exactly what it means. It's the same old problem everyone has been solving repeatedly for 20 years. It's not about edge cases. It's not about exceptions to rules self imposed by your specific needs. It's just centering inside a box. And the author of the article knows this, and solves it again for us for the nth time with updated techniques. The issue isn't how complicated a layout is or needs to be. If you were to look at how horizontal center is implemented under the hood, it's going to be complicated, yet that complexity is abstracted away. It boils down to the simple fact that intuitively when we've had <center> forever, why couldn't there have been a <vcenter> from the beginning? Not even broken, it never existed. It's as if we're being told, "horizontal centering we'll handle, but vertical centering is for you to figure out". Err, why? And figure out based on the tags and attributes provided. Like, they implemented the puzzle but not the solution. Similarly, why can't "vertical-align: center" just work more often? The fact that a div needs to be a table-cell or a grid, or having the option of using <td> that still works should all be redundant. There is nothing ambiguous about wanting to vertically center. We're always reverse engineering from a need. Complex needs justify complex code. Simple needs should be simple declarations.

goto11 6y ago
> why couldn't there have been a <vcenter> from the beginning? Because HTML is incrementally rendered. The content of <center> can be rendered line by line as data arrives, but a <vcenter> would need the full content to be loaded before it could be rendered, since you need to know the dimensions of the content before you can center it vertically in a container. Vertical centering cannot be supported in the ordinary top-down incremental flow rendering. It requires a more complex layout model like table, flex or grid.
- unabst 6y ago
  > It requires a more complex layout Yes and no. Yes, because vertical centering can be implemented manually using these available elements as you said. But no, because all it takes is one of these solutions and naming it "vcenter" under the hood and not having to interact with any of it. And that's exactly what we do using classes or using a css framework that provides for better abstraction than vanilla css. And as the original article demonstrates, there usually is one best practice that checks all the boxes. It's not that vertical aligning is buggy or that it doesn't work or that it's not possible. There was never a tag for it as if the need wasn't acknowledged, even with the browsers fully capable of doing it as demonstrated by every webmaster that did it since css1. And to add, complexity is never a reason when you're capable of abstraction. The main issue with CSS and HTML is there is no "let". You're always forced to deal with the specific tags directly. Instead, javascript is provided as a tool for abstraction. So again, it's all possible. We just have to do it ourselves as opposed to there just being a "let".
- stormbrew 6y ago
  I'm sorry but this is nonsense. When you have an img tag in an html document, and that image takes a while to load and has no pre-set width and height, guess what: the document renders fine and everything else adjusts when the image is finally loaded and its size is known. There's really no reason at all that a <vcenter>ed element couldn't be vertically centered at all times within its containing box, even as its containing box changes size, except a stubborn and dogmatic unwillingness to accept that web pages aren't magazine layouts. It would be more accurate to say that HTML is progressively rendered. As information comes in, boxes move and change size and eventually settle in their positions.
  - goto11 6y ago
    > everything else adjusts when the image is finally loaded and its size is known Yes, this is called reflow. At the time <center> was introduced, browsers did not support dynamic reflow (except by re-rendering the whole document from the top). For example tables had to be fully loaded before they would be rendered, and the same would be the case for a hypothetical <vcenter> element. <center> on the other hand can be progressively rendered without requiring reflow. My point is just that vertical centering requires a more complex layout model than horizontal centering.
    - unabst 6y ago
      And my point is regardless of how complex something is, unless it's impossible, you can just give the thing a name and hide the complexity under the hood. Imagine if this just worked since html1: <div center vcenter>centered</div> And this since css1: <div style="align:center; vertical-align: center">centered</div> Why are we still talking about how to vertical align elements in 2020? That's the question. Having to discuss history as an excuse to why anything is, is a symptom of the problem.
    - stormbrew 6y ago
      > At the time <center> was introduced... ... CSS didn't even exist yet. I don't think anyone is suggesting that vcenter or something like it should have existed at that time. The point is that it could have certainly been introduced by the time css came around and started handling more than basic text styling. It's been over two decades since that condition held. The "more complex layout model" has been here a long time.
megous 6y ago
> why couldn't there have been a <vcenter> from the beginning? So if you want to support a layout that adapts to the size of a viewport you'd do what? Go through DOM with JS on each size change and rewrite DOM from <vcenter> to <somethingelse> and back? With CSS as is, it's fairly easy to achieve.
- unabst 6y ago
  Vertical centering would work just as horizontal centering works in 99% of the cases as expected. The syntax could be symmetric. We override and adjust as needed. Instead, we have nothing to override or adjust. We're forced to pick a layout system just for a specific feature, and add 5 lines of code that now interferes with everything else. The argument isn't that it's hard. It's that it could be so much easier. But also, that there just might be a fundamental issue with the philosophy of what could have been just html has evolved into the monstrosity that is css/html/javascript+framework+backend_render... with "the inability for vertical alignment to declared simply" as evidence.

by unabst 6y ago

goto11 6y ago

> why couldn't there have been a <vcenter> from the beginning? Because HTML is incrementally rendered. The content of <center> can be rendered line by line as data arrives, but a <vcenter> would need the full content to be loaded before it could be rendered, since you need to know the dimensions of the content before you can center it vertically in a container. Vertical centering cannot be supported in the ordinary top-down incremental flow rendering. It requires a more complex layout model like table, flex or grid.

unabst 6y ago
> It requires a more complex layout Yes and no. Yes, because vertical centering can be implemented manually using these available elements as you said. But no, because all it takes is one of these solutions and naming it "vcenter" under the hood and not having to interact with any of it. And that's exactly what we do using classes or using a css framework that provides for better abstraction than vanilla css. And as the original article demonstrates, there usually is one best practice that checks all the boxes. It's not that vertical aligning is buggy or that it doesn't work or that it's not possible. There was never a tag for it as if the need wasn't acknowledged, even with the browsers fully capable of doing it as demonstrated by every webmaster that did it since css1. And to add, complexity is never a reason when you're capable of abstraction. The main issue with CSS and HTML is there is no "let". You're always forced to deal with the specific tags directly. Instead, javascript is provided as a tool for abstraction. So again, it's all possible. We just have to do it ourselves as opposed to there just being a "let".
stormbrew 6y ago
I'm sorry but this is nonsense. When you have an img tag in an html document, and that image takes a while to load and has no pre-set width and height, guess what: the document renders fine and everything else adjusts when the image is finally loaded and its size is known. There's really no reason at all that a <vcenter>ed element couldn't be vertically centered at all times within its containing box, even as its containing box changes size, except a stubborn and dogmatic unwillingness to accept that web pages aren't magazine layouts. It would be more accurate to say that HTML is progressively rendered. As information comes in, boxes move and change size and eventually settle in their positions.
- goto11 6y ago
  > everything else adjusts when the image is finally loaded and its size is known Yes, this is called reflow. At the time <center> was introduced, browsers did not support dynamic reflow (except by re-rendering the whole document from the top). For example tables had to be fully loaded before they would be rendered, and the same would be the case for a hypothetical <vcenter> element. <center> on the other hand can be progressively rendered without requiring reflow. My point is just that vertical centering requires a more complex layout model than horizontal centering.
  - unabst 6y ago
    And my point is regardless of how complex something is, unless it's impossible, you can just give the thing a name and hide the complexity under the hood. Imagine if this just worked since html1: <div center vcenter>centered</div> And this since css1: <div style="align:center; vertical-align: center">centered</div> Why are we still talking about how to vertical align elements in 2020? That's the question. Having to discuss history as an excuse to why anything is, is a symptom of the problem.
  - stormbrew 6y ago
    > At the time <center> was introduced... ... CSS didn't even exist yet. I don't think anyone is suggesting that vcenter or something like it should have existed at that time. The point is that it could have certainly been introduced by the time css came around and started handling more than basic text styling. It's been over two decades since that condition held. The "more complex layout model" has been here a long time.

megous 6y ago

> why couldn't there have been a <vcenter> from the beginning? So if you want to support a layout that adapts to the size of a viewport you'd do what? Go through DOM with JS on each size change and rewrite DOM from <vcenter> to <somethingelse> and back? With CSS as is, it's fairly easy to achieve.

unabst 6y ago
Vertical centering would work just as horizontal centering works in 99% of the cases as expected. The syntax could be symmetric. We override and adjust as needed. Instead, we have nothing to override or adjust. We're forced to pick a layout system just for a specific feature, and add 5 lines of code that now interferes with everything else. The argument isn't that it's hard. It's that it could be so much easier. But also, that there just might be a fundamental issue with the philosophy of what could have been just html has evolved into the monstrosity that is css/html/javascript+framework+backend_render... with "the inability for vertical alignment to declared simply" as evidence.