絕對與Flexbox，就在Safari

Question

Safari has full support for FlexBox according to caniuse.

定位，我只是想棧的不同大小的div的相互利用Flexbox的頂部。我是真的好奇，爲什麼這個工程在Chrome/Firefox中，但不是在Safari：

<div class="container"> 
    <div class="inner-one"></div> 
    <div class="inner-two"></div> 
</div> 

.container { 
    width: 15rem; 
    height: 15rem; 
    border-radius: 50%; 
    background-color: blue; 

    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.container div { 
    position: absolute; 
} 

.inner-one { 
    width: 13rem; 
    height: 13rem; 
    border-radius: 50%; 
    background-color: green; 
} 

.inner-two { 
    width: 11rem; 
    height: 11rem; 
    border-radius: 50%; 
    background-color: purple; 
} 

見的jsfiddle這裏：https://jsfiddle.net/19n95exf/3/

Answer 1

因爲position: absolute;休息display: flex，使用transform: translate代替

.container { 
 
     position: relative; 
 
     width: 15rem; 
 
     height: 15rem; 
 
     border-radius: 50%; 
 
     background-color: blue; 
 
    } 
 

 
    .container div { 
 
     border-radius: 50%; 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 50%; 
 
     transform: translate(-50%,-50%); 
 
    } 
 

 
    .inner-one { 
 
     width: 13rem; 
 
     height: 13rem; 
 
     background-color: green; 
 
    } 
 

 
    .inner-two { 
 
     width: 11rem; 
 
     height: 11rem; 
 
     background-color: purple; 
 
    }

<div class="container"> 
 
     <div class="inner-one"></div> 
 
     <div class="inner-two"></div> 
 
    </div>

---

或者給內部元件左/頂值

.container { 
 
     width: 15rem; 
 
     height: 15rem; 
 
     border-radius: 50%; 
 
     background-color: blue; 
 

 
     display: flex; 
 
     align-items: center; 
 
     justify-content: center; 
 
    } 
 

 
    .container div { 
 
     border-radius: 50%; 
 
     position: absolute; 
 
    } 
 

 
    .inner-one { 
 
     left: 1.5rem; 
 
     top: 1.5rem; 
 
     width: 13rem; 
 
     height: 13rem; 
 
     background-color: green; 
 
    } 
 

 
    .inner-two { 
 
     left: 2.5rem; 
 
     top: 2.5rem; 
 
     width: 11rem; 
 
     height: 11rem; 
 
     background-color: purple; 
 
    }

<div class="container"> 
 
     <div class="inner-one"></div> 
 
     <div class="inner-two"></div> 
 
</div>