Centering a div using flex and position: absolute gives different results on Safari [duplicate]

Answer 1

That is because Safari doesn't treat absolute positioned elements as the rest of the browsers do.

• Flexbox Gets New Behavior for absolute-positioned Children (from 2016)
• Flexbox - Absolutely-Positioned Flex Children

To center an absolute positioned element in Safari you need to use transform: translate

Note, if it should be relative to its parent, the flex-container, the flex-container has to have a position other than static, so here I gave it position: relative;

.flex-container {
  position: relative;                /*  added  */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
  background: #e2e2f2;
}

.flex-overlapping-item {
  position: absolute;
  left: 50%;                         /*  added  */
  top: 50%;                          /*  added  */
  transform: translate(-50%,-50%);   /*  added  */
}

  

    

      
Drag photo here
      
Photo must have 1000px x 1000px