web-dev-qa-db-fra.com

Comment aligner verticalement une position: élément relatif?

Comment centrer verticalement le conteneur parent sur le canevas qui a position:relative? Le conteneur parent a un élément enfant avec position:absolute. L'élément enfant a été positionné au centre du conteneur parent.

Voici un extrait:

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: red;
  margin: auto;
}

.item {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
<div class="container">
  <div class="item"></div>
</div>
cssalignmentcss-positioncenter
12
Vennsoh

Une solution consiste à envelopper votre .container avec deux enveloppes; donne le premier display: table; et height: 100%; width: 100%; et le deuxième display: table-cell; et vertical-align: middle;. Assurez-vous également que vos body et html ont toute la hauteur.

Voici une petite démo fonctionnelle: petit lien .

Une autre méthode consiste à appliquer top: 50%; à ton .container et margin-top: -150px; (300px / 2 = 150px). (Notez que cette méthode nécessite que vous connaissiez la hauteur exacte de votre conteneur, donc cela pourrait ne pas être exactement ce que vous voulez, mais cela pourrait aussi bien être !). Une petite démo fonctionnelle de cette dernière méthode: n autre petit lien .

J'espère que cela a aidé!

15
Chris