Menu
Doing some html horizontal center stuff, I just realized that I could use both things to center a box element into its parent, so my question is which of those 2 are better (in terms of performance, usability, etc).
312
text-align: center will center the contents of the container, while margin: auto will center the container itself. You should be careful with margin:auto because it is not supported in IE6.
So in margin: 0 auto, the top/bottom margin is 0, and the left/right margin is auto, Where auto means that the left and right margin are automatically set by the browser based on the container, to make element centered.
If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container, depending on the direction in which the auto-margin is applied.
The auto Value You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
Because of the way margins are handled in flex, these do the same job.
But as a general practice, when you have more div's, using flex would do the job more accurately and will provide you choice for distributing the space equally".
When you have few div' , you can go with margin:auto .
Remember flexbox provides us the choice for redistributing the space.
63
If you use div or p it's better to use margin: 0px auto; for containers or main page,
But if you need two or more children to be centered, it's better to set parent to text-align:center and the children to display: inline-block.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
