flexbox를 사용하여 div를 div에서 수평 및 수직으로 정렬하려면 어떻게합니까?

Question

flexbox를 사용하여 div을 또 다른 div에 센터링 (수평) 및 가운데 (수직)합니까?

Other Q/A exists,하지만 auto-margin 모두 수평 및 수직 축에 대해 자동으로 마진을 설정한다 설정하는 인 flexbox에서

Answer 1

jsFiddle

너무 구체적.

HTML

<div class="parent"> 
    <div class="child"> 
    </div> 
</div> 

CSS

html, body {width:100%;height:100%;} 
.parent { 
    display: flex; 
    width: 100%; 
    height: 100%; 
    border: 5px solid red; 
} 

.child { 
    width: 100px; 
    height: 100px; 
    margin: auto; /* Auto margin for both horizontal and vertical axis */ 
    border: 5px solid blue; 
}