Comment centrer un élément dans un div parent verticalement

Je veux centrer ci-dessous wrapper dans l'élément div parent avec un height égal à windowsview height, en utilisant CSS.Comment centrer un élément dans un div parent verticalement

HTML

<div class="main-header"> 
    <div class="wrapper">center div</div> 
</div>

CSS

.main-header{ 
color: #fff; 
background: #16a8ec; 
padding: 10px; 
height: 100vh; 
position: relative; } 

.wrapper{ 
position: absolute; 
left: 0px; 
right: 0px; 
transform: translate(0px, 50%); /* i used transform but it doesn't work */ 
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ }

S'il vous plaît aidez-moi les gars, merci.

Source

2017-09-20 bellabelle

La question a été résolu avec l'utilisation de l'affichage flex – bellabelle

@bellabelle Salut, essayez de cette façon: https://jsfiddle.net/dh0o82g6/ avec positionnement && avec FlexBox: https://jsfiddle.net/dh0o82g6/1/ –

Au lieu d'utiliser px dans votre positionnement, essayez d'utiliser '%' qui fonctionne parfaitement avec différents écrans. – bhansa

Voulez-vous quelque chose comme ça?

Les modifications:

html et l'élément de corps doivent être réglées sur la hauteur de la fenêtre (fenêtre), j'utiliser la propriété height:100vh, puis le corps par défaut est la marge réglée sur 8px, donc j'ai utilisé la propriété margin:0px.
Pour centrer le div à l'intérieur, il suffit d'utiliser text-align: center pour le div avec la classe main-header.

html, 
 
body { 
 
    height: 100vh; 
 
    margin: 0px; 
 
} 
 

 
.main-header { 
 
    color: #fff; 
 
    background: #16a8ec; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    height: 100vh; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.wrapper { 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
}

<div class="main-header"> 
 
    <div class="wrapper">center div</div> 
 
</div>

Source

2017-09-20 07:30:34

non, je veux centrer l'élément d'emballage verticalement – bellabelle

@bellabelle pouvez-vous vérifier ma réponse maintenant? –

Avec FlexBox:

.main-header{ 
    color: #fff; 
    background: #16a8ec; 
    padding: 10px; 
    height: 100vh; 
    position: relative; 
    /* Flexbox */ 
    display: flex; 
    align-items: center; 
} 

.wrapper{ 
    /* your wrapper style */ 
}

Avec position absolue:

.main-header{ 
    color: #fff; 
    background: #16a8ec; 
    padding: 10px; 
    height: 100vh; 
    position: relative; 
} 

.wrapper{ 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

Source

2017-09-20 07:30:35

le résultat n'est pas – bellabelle

Désolé, vous avez raison avec votre réponse, afficher flex puis aligner les éléments centre – bellabelle

ça marche! Merci – bellabelle

Cochez cette case: Ajouté top:46% et left:46%, vous pouvez également le faire d'une autre manière.

.main-header{ 
 
color: #fff; 
 
background: #16a8ec; 
 
padding: 10px; 
 
height: 100vh; 
 
position: relative; } 
 

 
.wrapper{ 
 
position: absolute; 
 
top:46%; 
 
left: 46%; 
 
transform: translate(0px, 50%); /* i used transform but it doesn't work */ 
 
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ }

<div class="main-header"> 
 
    <div class="wrapper">center div</div> 
 
</div>

Source

2017-09-20 07:33:27 bhansa

Il vous suffit d'ajouter à votre top: 0; bottom: 0.wrapper comme ceci:

.main-header{ 
 
color: #fff; 
 
background: #16a8ec; 
 
padding: 10px; 
 
height: 100vh; 
 
position: relative; } 
 

 
.wrapper{ 
 
position: absolute; 
 
left: 0px; 
 
right: 0px; 
 
transform: translate(0px, 50%); /* i used transform but it doesn't work */ 
 
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ 
 
text-align: center; 
 
top: 0; 
 
bottom: 0; 
 
}

<div class="main-header"> 
 
    <div class="wrapper">center div</div> 
 
</div>

Vous pouvez également vérifier Fiddle

Source

2017-09-20 07:35:54 kravisingh

Donnez simplement display: table au parent et display: table-cell; vertival-align: middle; à l'enfant qui travaillera pour vous.

Exemple de travail.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     .main-header { 
 
      color: #fff; 
 
      background: #16a8ec; 
 
      padding: 10px; 
 
      height: 100vh; 
 
      width: 100%; 
 
      display: table; 
 
     } 
 
     
 
     .wrapper { 
 
      display: table-cell; 
 
      vertical-align: middle; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="main-header"> 
 
     <div class="wrapper">center div</div> 
 
    </div> 
 
</body> 
 

 
</html>

Source

2017-09-20 07:37:27 Nitheesh

Comment centrer un élément dans un div parent verticalement

Répondre

Questions connexes