Centrer l'image verticalement en div en utilisant seulement css

Question

J'essaye de centrer une image qui est contenue dans un div avec l'affichage réglé à la table. Dans celui-ci, je souhaite afficher une image, qui devrait être positionnée au centre, à la fois verticalement et horizontalement. J'ai atteint la position horizontale en utilisant margin: auto et en le définissant comme display: table-cell, mais il ne le centre pas verticalement. Toute aide serait grande

.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

Je recommande de donner la .overlay<div> un flexbox layout au lieu d'une table. Ensuite, vous pouvez centrer l'image en appliquant simplement trois règles au parent:

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

Notez que vous aurez plus besoin display: table-cell ou margin: auto sur .swipe.

Cela peut être vu dans l'exemple suivant:

.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>

Hope this helps! :)

Answer 2

Utilisation rembourrage en haut et en bas

.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" />