Maybe i don't understand exactly, what problem this article was designed to solve.
I mostly use 2 or 3 solutions depending on the "situation".
You have an easy time, when you are working with flex or grid items because you can easily center elements horizontally, vertically or both in it.
If you are in block or inline block context margin: 0 auto, margin: x auto y auto, text align: center can works for horizontal centering. But as you mentioned, you need to set the width if your display property is inline-block, because in that case your element inherits the block and inline level behaviors.
If you want to center vertically and you have fix height, the line-height "hack" can work. Otherwise you can play with items height, margin, padding etc.
You have another help in the form of absolute positioning.
You can absolute position the item in both axis (x,y) with the value 50% then corrigate with transform translate(x,y), translateX or translateY if your container elements position is other than static.
I think you have much easier time if you use flex or grid.
Good to know that flex and grid also creates Block Formatting Context which suppress margin collapsing for example.
Understand. Thanks for your answer! :) Yes you are right.
But what about display:flex; justify-content: center; align-items: center solution?
It isn't worked for you in some cases or something?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Maybe i don't understand exactly, what problem this article was designed to solve.
I mostly use 2 or 3 solutions depending on the "situation".
You have an easy time, when you are working with flex or grid items because you can easily center elements horizontally, vertically or both in it.
If you are in block or inline block context margin: 0 auto, margin: x auto y auto, text align: center can works for horizontal centering. But as you mentioned, you need to set the width if your display property is inline-block, because in that case your element inherits the block and inline level behaviors.
If you want to center vertically and you have fix height, the line-height "hack" can work. Otherwise you can play with items height, margin, padding etc.
You have another help in the form of absolute positioning.
You can absolute position the item in both axis (x,y) with the value 50% then corrigate with transform translate(x,y), translateX or translateY if your container elements position is other than static.
I think you have much easier time if you use flex or grid.
Good to know that flex and grid also creates Block Formatting Context which suppress margin collapsing for example.
It can be hard to both vertically and horizontally center elements. Goal was to show the ways to do that.
Understand. Thanks for your answer! :) Yes you are right.
But what about display:flex; justify-content: center; align-items: center solution?
It isn't worked for you in some cases or something?