div의 세로 가운데 이미지 (CSS 만 사용)

Question

div에 포함 된 이미지의 가운데에 표를 설정하여 표시하려고합니다. 그 안에는 수직과 수평 가운데에 위치해야하는 이미지를 표시하고 싶습니다. 나는 margin : auto를 사용하여 수평 위치를 얻었고 display : table-cell으로 설정했다. 그러나 수직으로 중심을 맞추지 않았다. 어떤 도움을 내가 대신 테이블의 .overlay<div>flexbox layout를주는 것이 좋습니다

.overlay { height: 50%; background: red;position: fixed; 
 
top: 0; 
 
left: 0; 
 
height: 50%; 
 
width: 100%; 
 
display: table;} 
 
.swipe {height: 80px; 
 
display: table-cell; 
 
margin: auto;}

<div style="height:300px"> 
 
<div class="overlay"> 
 
    <img class="swipe" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />

Answer 1

좋은 것입니다. 그럼 당신은 단순히 부모에게 세 가지 규칙을 적용하여 이미지 위치를 지정할 수 있습니다 : 당신이 더 이상 .swipe에 display: table-cell 또는 margin: auto 필요하지 않을 것입니다

.overlay { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

참고.

이 다음 예에서 볼 수있다 :

.overlay { 
 
    height: 50%; 
 
    background: red; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 50%; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.swipe { 
 
    height: 80px; 
 
}

<div style="height:300px"> 
 
    <div class="overlay"> 
 
    <img class="swipe" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" /> 
 
    </div> 
 
</div>

희망이 도움이! :)

Answer 2

사용 상단 여백과 하단

.overlay { background: red; position: fixed; 
 
top: 0; 
 
left: 0; 
 
padding: 5% 0 5% 0; 
 
width: 100%; 
 
display: table;} 
 
.swipe {height: 80px; 
 
display: table-cell; 
 
margin: auto;}

<div style="height:300px"> 
 
<div class="overlay"> 
 
    <img class="swipe" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />