Question Comment centrer l'élément absolument positionné dans div?


Je dois placer un div (avec position:absolute;) élément au centre de ma fenêtre. Mais j'ai des problèmes à le faire, parce que le la largeur est inconnue.

J'ai essayé ça. Mais il doit être ajusté car la largeur est réactive.

.center {
  left: 50%;
  bottom:5px;
}

Des idées?


867
2017-11-21 21:56


origine


Réponses:


<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>


1164
2017-11-22 00:21



Cela fonctionne pour moi:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>


1633
2017-11-25 20:07



Solution réactive

Voici une bonne solution pour un design réactif ou des dimensions inconnues en général si vous n'avez pas besoin de supporter IE8 et plus bas.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}
<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

Voici un violon JS

L'indice est, que left: 50% est relatif au parent tandis que le translate La transformation est relative aux éléments largeur / hauteur.

De cette façon, vous avez un élément parfaitement centré, avec une largeur flexible sur l'enfant et le parent. Bonus: cela fonctionne même si l'enfant est plus grand que le parent.

Vous pouvez également le centrer verticalement avec ceci (et encore, la largeur et la hauteur du parent et de l'enfant peuvent être totalement flexibles (et / ou inconnues)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Gardez à l'esprit que vous pourriez avoir besoin transform fournisseur préfixé ainsi. Par exemple -webkit-transform: translate(-50%,-50%);


552
2018-04-30 09:54



Vraiment agréable post .. Je voulais juste ajouter si quelqu'un veut le faire avec une seule balise div puis ici la sortie:

Prise width comme 900px.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

Dans ce cas, il faut savoir le width préalablement.


45
2017-08-31 09:56



Centre absolu 

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS: 

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Démonstration http://jsbin.com/rexuk/2/

Testé dans Google Chrome, Firefox et IE8

J'espère que cela t'aides :)


30
2018-01-30 02:29



ce travail pour vertical et horizontal

  #myContent{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
   }

et si vous voulez faire le centre de l'élément parent, définissez la position du parent parent

 #parentElement{
      position:relative
  }

modifier:

  • pour l'alignement vertical du centre, réglez la hauteur sur votre élément. merci à @Raul

  • si vous voulez faire le centre de l'élément parent, définissez la position du parent par rapport à


28
2017-12-07 09:26



À la recherche d'une solution, j'ai obtenu les réponses ci-dessus et j'ai pu centrer le contenu avec Matthias Weiler répond mais en utilisant text-align.

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

J'ai travaillé avec chrome et Firefox.


17
2018-05-29 01:36



Pour autant que je sache, ceci est impossible à réaliser pour une largeur inconnue.

Vous pouvez - si cela fonctionne dans votre scénario - positionner absolument un élément invisible avec 100% de largeur et de hauteur, et avoir l'élément centré dedans en utilisant margin: auto et éventuellement vertical-aligner. Sinon, vous aurez besoin de Javascript pour le faire.


9
2017-11-21 22:00