web-dev-qa-db-fra.com

Comment centrer un élément absolument positionné dans div?

Je dois placer un élément div (avec position:absolute;) au centre de ma fenêtre. Mais j'ai du mal à le faire car la largeur de la est inconnue .

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

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

Des idées?

csscss-positioncenterabsolute
947
Ish

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

1241
bobince

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>

1698
Matthias Weiler

Solution réactive

Voici une bonne solution pour une conception réactive ou des dimensions inconnues en général si vous n'avez pas besoin de prendre en charge IE8 et versions antérieures.

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

L'indice est que left: 50% est relatif au parent tandis que la transformation translate est relative à la largeur/hauteur des éléments.

De cette façon, vous avez un élément parfaitement centré, avec une largeur flexible à la fois pour 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 une fois, 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 aurez peut-être également besoin du préfixe du vendeur transform. Par exemple, -webkit-transform: translate(-50%,-50%);

620
ProblemsOfSumit

Really Nice post .. Je voulais juste ajouter si quelqu'un veut le faire avec un tag simple div, voici le moyen de sortir:

En prenant width comme 900px.

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

Dans ce cas, il faut connaître la width à l'avance.

48
pratikabu

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émo:http://jsbin.com/rexuk/2/

Testé dans Google Chrome, Firefox et IE8

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

31
Ijas Ameenudeen

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 du parent, définissez la position du parent relatif

 #parentElement{
      position:relative
  }

modifier:

  • pour le centre vertical, alignez la hauteur définie sur votre élément. grâce à @Raul

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

30
Mohsen Abdollahi

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

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

Travaillé avec chrome et Firefox.

19
cavila

Je comprends que cette question a déjà quelques réponses, mais je n’ai jamais trouvé de solution qui fonctionnerait dans presque toutes les classes, qui soit logique et élégante.

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}
<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

Cela signifie que vous devez me donner un top: 50% et un left: 50%, puis transformer (créer un espace) sur l'axe X/Y en la valeur -50%, en un sens "créer un espace miroir".

En tant que tel, cela crée un espace égal sur tous les 4 points d'une div, qui est toujours une boîte (a 4 côtés).

Cette volonté:

  1. Travaillez sans avoir à connaître la hauteur/largeur du parent.
  2. Travaillez sur responsive.
  3. Travailler sur les axes X ou Y. Ou les deux, comme dans mon exemple.
  4. Je ne peux pas arriver à une situation où cela ne fonctionne pas.
11
Daniel Moss

Fonctionne sur n’importe quelle largeur inconnue aléatoire de l’élément positionné absolu que vous souhaitez placer au centre de votre élément conteneur 

Démo

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
9
lowtechsun

Autant que je sache, c'est impossible à réaliser pour une largeur inconnue.

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

9
Pekka 웃

J'aimerais ajouter à la réponse de @ bobince:

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

Amélioré: ///, la barre de défilement horizontale n'apparaît pas avec les grands éléments dans le div centré.

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; 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>
    </div>
</body>
7
Vial

Voici un plugin jQuery utile pour le faire. Trouvé ici . Je ne pense pas que ce soit possible uniquement avec CSS

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};
6
Ben Shelock

Ma méthode de centrage préférée:

position: absolute;
margin: auto;
width: x%
  • positionnement absolu des éléments de bloc
  • marge auto
  • même gauche/droite, haut/bas 

JSFiddle ici

4
vp_arth

Cela a fonctionné pour moi:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
4
Alan

version sass/compass de Responsive Solution ci-dessus:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}
4
Adam Spence
#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
3
Burcu AKCAOGLU

Je sais que j'ai déjà fourni une réponse et que ma réponse précédente, ainsi que d'autres données, fonctionnent parfaitement. Mais j’ai utilisé cela dans le passé et cela fonctionne mieux sur certains navigateurs et dans certaines situations. J'ai donc pensé que je pouvais aussi donner cette réponse. Je n'ai pas "modifié" ma réponse précédente et je l'ai ajoutée parce que j'estime qu'il s'agit d'une réponse totalement distincte et que les deux réponses fournies ne sont pas liées.

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}
3
Dustin Poissant

Flex peut être utilisé pour centrer div div position absolue.

display:flex;
align-items:center;
justify-content:center;


.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}
<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

2
Dhaval Jardosh

Cette solution fonctionne si l'élément a width et height 

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
<div class="wrapper">
  <div class="content"></div>
</div>

2
Mo.

C’est un truc que j’ai imaginé pour faire en sorte qu’une DIV flotte exactement au centre d’une page. Vraiment moche bien sûr, mais fonctionne dans tous

Dots and Dashes 

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

Nettoyeur

Wow, cinq ans ont passé, n'est-ce pas?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

1
Mr. B

la solution de cette question n'a pas fonctionné pour mon cas .. Je fais une légende pour certaines images et j'ai résolu en utilisant cette

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;


figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}
<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>

1
Marcogomesr

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

1
Dustin Poissant

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

Ceci et plusieurs exemples ici

1
user3102226

Vous pouvez également créer la boîte à middleware div#centered centrée avec les propriétés absolute, left et right et sans la propriété width, puis définir le contenu principal div en tant que son enfant avec la boîte display:inline-block et le centrer avec text-align:center comme étant sa boîte parent

#container{
  position: relative;
  width: 300px;
  height: 300px;
  border: solid 1px blue;
  color:#dddddd;
}

#centered{
  position: absolute;
  text-align: center;
  margin: auto;
  top: 20px;
  left:0;
  right:0;
  border: dotted 1px red;
  padding: 10px 0px;
  
  
}

#centered>div{
  border: solid 1px red;
  display:inline-block;
  color:black;
}
<div id="container">
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  
  <div id="centered">
    <div>
      hello world <br/>
      I don't know my width<br/>
      but I'm still absolute!  
    </div>
  </div>

</div>
0
Paweł

C’est un mélange d’autres réponses qui ont fonctionné pour nous:

  position: absolute;
  top: 50%;
  margin: auto;
  transform: translate(-50%, -50%);
0
Crashalot
.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}
0
AndreyP

Si vous devez aussi vous centrer horizontalement et verticalement:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);
0
jabko87

#content { margin:0 auto; display:table; float:none;}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

0
amit bende

Vous pouvez placer l'image dans un div et ajouter un identifiant de div et avoir le CSS pour ce div Avoir un text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}
0
Dworvin Vonstrangle

Une approche simple qui a fonctionné pour moi pour centrer horizontalement un bloc de largeur inconnue:

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

Une propriété text-align peut être ajoutée à l'ensemble de règles #block pour aligner son contenu indépendamment de l'alignement du bloc.

Cela a fonctionné sur les versions récentes de Firefox, Chrome, IE, Edge et Safari.

0
Terence Bandoian