CSS absolute position won’t work with margin-left:auto margin-right: auto

by

EDIT : this answer used to claim that it isn’t possible to center an absolutely positioned element with margin: auto;, but this simply isn’t true. Because this is the most up-voted and accepted answer, I guessed I’d just change it to be correct.

When you apply the following CSS to an element

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

And then give the element a fixed width and height, such as 200px or 40%, the element will center itself.

Here’s a Fiddle that demonstrates the effect.

More Related Contents:

  1. How to overlay one div over another div
  2. How does the “position: sticky;” property work?
  3. Make absolute positioned div expand parent div height
  4. Position: absolute and parent height?
  5. Difference between position:sticky and position:fixed?
  6. What are the CSS properties that get elements out of the normal flow?
  7. CSS position element “fixed” inside scrolling container
  8. click link below a higher z-index div [duplicate]
  9. Applying an ellipsis to multiline text [duplicate]
  10. How to modify the fill color of an SVG image when being served as background image?
  11. Style input type file? [duplicate]
  12. Table with fixed header and fixed column on pure css
  13. How to display scroll bar onto a html table
  14. Why can’t I center with margin: 0 auto?
  15. How to apply CSS page-break to print a table with lots of rows?
  16. Prevent “overscrolling” of web page
  17. Is it possible to always show up/down arrows for input “number”?
  18. How can I put DIV in P?
  19. What is the browser-default background color when selecting text?
  20. How to center image horizontally within a div element?
  21. How to make a stable two column layout in HTML/CSS
  22. CSS Expressions
  23. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  24. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  25. Removing unwanted table cell borders with CSS
  26. Why is translateY(-50%) needed to center an element which is at top: 50%?
  27. Transparent scrollbar with css
  28. Make A List Item Clickable (HTML/CSS)
  29. Bootstrap row and col explanation
  30. Table with table-layout: fixed; and how to make one column wider

Leave a Comment