How to use safe center with flexbox?

by

The newer keyword safe still has bad browser support, so to get the same effect, cross browser, use auto margins for now, which should be set on the flex item.

Updated codepen

Note, to compensate for the modal‘s 50px top/bottom margin, use padding on modal-container.

.modal-container
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;                /*  changed  */
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  padding: 50px 0;                        /*  added  */
  box-sizing: border-box;                 /*  added  */
}
.modal-container > #modal
{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;                         /*  changed  */
  padding: 12px;
  width: 50%;
  background-color: #333;
  cursor: pointer;
}

More Related Contents:

  1. How to create one vertical column in between rows in Flexbox [closed]
  2. Why is a flex item limited to parent size?
  3. Fill remaining vertical space with CSS using display:flex
  4. How does flex-wrap work with align-self, align-items and align-content?
  5. Flex-box: Align last row to grid
  6. Text in a flex container doesn’t wrap in IE11
  7. Equal height rows in CSS Grid Layout
  8. How to make flexbox items the same size?
  9. Align 3 unequal blocks left, center and right
  10. How can I align one item right with flexbox?
  11. My position: sticky element isn’t sticky when using flexbox
  12. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  13. Every item to have the same width as the widest element [duplicate]
  14. How can I make a div span multiple rows and columns in a grid?
  15. Flexible box model – display : flex, box, flexbox? [duplicate]
  16. Usage of display property of flex box items
  17. firefox overflow-y not working with nested flexbox
  18. Removing display:flex adds spaces around a link. Why?
  19. Are flex items block level element?
  20. Bootstrap change order of columns
  21. How to specify an element after which to wrap in css flexbox? [duplicate]
  22. CSS3 Flexbox: display: box vs. flexbox vs. flex
  23. Flex auto margin not working in IE10/11
  24. Prevent flex items from overflowing a container
  25. How can I create multi columns from a single unordered list?
  26. Can flex items wrap in a container with dynamic height?
  27. How to fix unexpected column order in bootstrap 4?
  28. How to stretch children to fill cross-axis?
  29. Issue when centering vertically with flexbox when heights are unknown
  30. Do I not understand the flex-grow property?

Leave a Comment