Why does “position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto” actually center?

by

This is accounted for in section 10.3.7 of the CSS2.1 spec:

The constraint that determines the used values for these elements is:

‘left’ + ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ + ‘right’ = width of containing block

If none of the three is ‘auto’: If both ‘margin-left’ and ‘margin-right’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values […]

As you can see, auto margins on both sides behave the same for absolutely-positioned elements as they do for non-positioned block-level elements, provided that the left and right offsets, as well as width, are not auto.

Interestingly, only for absolutely-positioned elements, this applies to top, height and bottom as well, which essentially means that it is possible to vertically center an absolutely-positioned element using auto margins. Again, this is provided that the three properties above are not auto, and the respective margins are auto. (In your case, this means margin: auto rather than margin: 0 auto as the latter zeroes out the vertical margins.)

More Related Contents:

  1. Heights rendering differently in Chrome and Firefox [duplicate]
  2. White space at bottom of anchor tag
  3. Change the color of a bullet in a html list?
  4. How to make a border overlay child div?
  5. 100vh height when address bar is shown – Chrome Mobile
  6. Fixed footer in Bootstrap
  7. min-height does not work with body
  8. How to make div appear in front of another?
  9. CSS On hover show another element
  10. How do I avoid a page break immediately after a heading
  11. Can flexbox detect when a flex item wraps?
  12. CSS replacement for
  13. What’s the point of valid CSS/HTML?
  14. How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?
  15. What is the best way to replace the file browse button in html?
  16. CSS making two divs equal height with display table
  17. CSS triangle containing text
  18. Why does display: inline-block; remove an underline from a child element?
  19. What is the box-sizing property for in CSS?
  20. CSS margin pushing the body element
  21. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  22. Sticky footer with flexbox
  23. Why are horizontal scroll bars shown on my website?
  24. White space under image [duplicate]
  25. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  26. Is it bad design to use table tags when displaying forms in html?
  27. Making a flex item float right
  28. Wrap a text within only two lines inside div
  29. Can I specify maxlength in css?
  30. Make floating divs the same height

Leave a Comment