Comment centrer l'élément en position absolue dans div?

1078

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

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

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

Des idées?

css css-position center absolute Ish
la source
4
Vous avez un exemple dans les exemples du centre absolu qui peuvent être généralisés dans différentes situations.
Mihai8
2
Il y a une meilleure réponse à cette question sur stackoverflow.com/questions/17976995/…
Andrew Swift

Réponses:

1333 

<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>
Développer l'extrait

bobince
la source
76
Impressionnant. A travaillé pour moi! Un problème que j'ai eu: l'image que je centrais était assez grande, cela a fait que le div externe dépassait le bord droit de la page et provoquait un défilement horizontal. J'ai échangé la propriété CSS "gauche" pour "droite", et jusqu'à présent, cela fonctionne mieux car le fait de dépasser le bord gauche de l'écran ne provoque pas de défilement
BoomShaka
si l'utilisateur a fait défiler la page vers le bas, une superposition apparaît en haut, pensez-vous que ce sera une bonne idée d'utiliser jquery pour résoudre le problème de défilement
PUG
1
une solution au problème de défilement peut être, position: fixedmais qu'en cas de hauteur inconnue de la superposition, des barres de défilement pour la superposition devront être implémentées
PUG
3
Il y a un problème mineur que j'ai rencontré en utilisant cette technique. Étant donné que la division externe occupe 50% de l'écran, un certain décalage se produit lorsque le texte est plus large que la taille d'écran de 50%. J'ai résolu ce problème en définissant la div externe sur "width: 100%" et en supprimant la propriété gauche. Pour le div intérieur, je mets simplement mon texte-align au centre. Cela résout le problème.
Nicky L.
3
La hauteur en pourcentage est relative au bloc conteneur, dans ce cas <html>. Mais l' <html>élément n'a pas de heightspécifié, il prend donc la hauteur de tout le contenu du document, ce qui n'est rien car le seul contenu est absolument positionné (retiré du flux de contenu). L'ajout height: 100%à l' <html>élément fait une différence.
bobince
1801

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>
Développer l'extrait

Matthias Weiler
la source
36
Je veux juste comprendre que les marges négatives sont des CSS parfaitement valides et ne doivent pas être considérées comme un "hack sale". Les marges négatives sont mentionnées dans la spécification du modèle de boîte W3C. Certaines personnes semblent décider arbitrairement qu'il s'agit d'un piratage parce qu'elles a) les ignorent ou b) les utilisent pour corriger leur mauvais CSS.
Joseph Ravenwolfe
58
la largeur du div à centrer doit être définie - ne fonctionnera pas automatiquement avec, disons, un bouton avec du texte dessus.
Stefan
2
@Joshua Cela ne sera centré que horizontalement, pas verticalement comme l'autre réponse.
ygoe
3
Je préfère cette solution car elle n'augmente pas la taille de la fenêtre.
iceydee
13
Pour la prise en charge multi-navigateurs: widthdoit être défini sur une valeur spécifique pour que cela fonctionne. autoet 100%ne centre pas l'élément. display: block;est un must. position: absolute;n'est PAS un must. Toutes les valeurs fonctionneront. L'élément parent positiondoit être défini sur autre chose que static. leftIl n'est pas nécessaire de définir et rightde 0. margin-left: auto; margin-right: auto;fera le travail.
Onur Yıldırım
767

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 inférieur.

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

Afficher l'extrait de code

Voici un JS Fiddle

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

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 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 pourriez également avoir besoin du transformpréfixe du fournisseur. Par exemple-webkit-transform: translate(-50%,-50%);

ProblemsOfSumit
la source
26
Le support d'IE7 n'étant plus nécessaire, cela devrait être la solution de facto. Cette solution est meilleure que la technique gauche: 0 / droite: 0 car cela rend les éléments pleine largeur alors que cela conserve la largeur et fonctionne sur les éléments de largeurs inconnues.
aleemb
51
De loin la meilleure réponse, cela fonctionne si la boîte dans laquelle le div est contenu est plus petite que l'enfant.
Affaire
2
@ChadJohnson, bien sûr. Essayez-le avec le webkit-préfixe comme je l'ai suggéré.
ProblemsOfSumit
2
Ah, j'ai raté votre note sur -webkit. Impressionnant.
Chad Johnson
3
transform: translatesemble rendre position: fixedinutilisable chez les enfants. La réponse acceptée fonctionne mieux dans ce cas.
dmvianna
49

Vraiment un bon article .. Je voulais juste ajouter si quelqu'un veut le faire avec une seule balise div, puis voici la sortie:

Prenant widthcomme 900px.

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

Dans ce cas, il faut savoir à l' widthavance.

pratikabu
la source
26
"because the width is unknown"... cela ne répond pas à la question
Michel Ayres
15
salut @Michel en fait lorsque vous recherchez sur Google quelque chose en rapport avec le centrage du div absolu, ce lien est le premier lien. C'est pourquoi j'ai ajouté cette solution, au cas où quelqu'un comme moi serait à la recherche de la solution ci-dessus .. :)
pratikabu
1
Pas très utile pour la conception réactive, mais cela a fonctionné pour moi jusqu'à ce que je commence à faire des conceptions réactives. C'est une réponse valable pour centrer des éléments de largeur connue positionnés de manière absolue .
Sean Kendle
36

Absolute Center

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

Ijas Ameenudeen
la source
Cela ne fonctionne pas, veuillez vérifier le codepen codepen.io/anon/pen/YqWxjJ suivant
Mark
1
Désolé, je pense que cela fonctionnera, mais vous devez inclure une hauteur et une largeur fixes codepen.io/anon/pen/WwxEYQ
Mark
31

ce travail pour vertical et horizontal 

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

et si vous voulez placer l'élément au centre du parent, définissez la position du parent par rapport

 #parentElement{
      position:relative
  }

Éditer:

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

  • si vous voulez placer l'élément au centre du parent, définissez la position du parent sur relative

Mohsen Abdollahi
la source
2
Je pense que vous devez ajouter de la hauteur pour que la verticale fonctionne.
Raul
On dirait que ceci se positionne au centre de la page, pas au centre d'un autre élément.
Günter Zöchbauer
1
@ GünterZöchbauer oui, si vous voulez faire de l'élément le centre du parent, définissez la position du parent par rapport.
Mohsen Abdollahi
20

À la recherche d'une solution, j'ai obtenu des réponses ci-dessus et j'ai pu centrer le contenu sur la réponse de Matthias Weiler mais en utilisant l'alignement du texte.

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

Fonctionné avec Chrome et Firefox.

cavila
la source
5
Je pense que vous n'avez pas besoin du "text-align: center"
Tobias
Cela a résolu mon problème ici . Merci!
Volomike
J'avais besoin de "text-align: center", et cela a fonctionné là où la solution suggérée par @ProblemsOfSumit n'a pas fonctionné car elle a fait mon habillage de texte.
Nat
19

Si vous devez également centrer horizontalement et verticalement:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);
michal.jakubeczy
la source
correctif très cool merci
Stanley Bateswar
15

** SOLUTION RÉACTIVE **

En supposant que l'élément dans le div, est un autre div ...

cette solution fonctionne bien

<div class="container">
  <div class="center"></div>
</div>

le conteneur peut être de n'importe quelle taille (doit être relatif)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

L'élément ( div ) peut également être de n'importe quelle taille (doit être plus petit que le conteneur )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

Le résultat ressemblera à ceci. Exécutez l'extrait de code

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}
<div class="container">
	<div class="center"></div>
</div>
Développer l'extrait

Je l'ai trouvé très utile

RealMJDev
la source
1
génie. pourquoi l'autre n'est-il pas venu avec ça.
mesqueeb
Merci, bon codage
RealMJDev
13

Ceci est un mélange d'autres réponses, qui ont fonctionné pour nous:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}
Crashalot
la source
Belle solution merci mec!
Stanley Bateswar
12

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 également logique et élégante, alors voici ma position après avoir peaufiné un tas:

.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>
Développer l'extrait

Ce que cela signifie, c'est me donner un top: 50%et un left: 50%, puis transformer (créer un espace) sur les deux axes X / Y à la -50%valeur, dans 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. Travaillez sur l'axe X ou Y. Ou les deux, comme dans mon exemple.
  4. Je ne peux pas trouver une situation où cela ne fonctionne pas.
Daniel Moss
la source
Veuillez me faire savoir si vous trouvez une situation où cela ne fonctionne pas afin que je puisse éditer la question avec votre entrée.
Daniel Moss
transformer / traduire fera que safari rendra le texte flou à une certaine échelle
James Tan
@DanielMoss une raison de ne pas utiliser translate(-50%,-50%);?
Mark Baijens
12

Fonctionne sur toute largeur inconnue aléatoire de l'élément positionné absolu que vous souhaitez avoir 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;
}
lowtechsun
la source
9

Flex peut être utilisé pour centrer la div positionnée absolue.

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

Afficher l'extrait de code

Dhaval Jardosh
la source
sur mon écran -Firefox 68.x, il ne s'aligne tout simplement pas, le bloc absolu apparaît en bas du bloc relatif
Webwoman
Peux-tu essayer ça display: -webkit-flex;?
Dhaval Jardosh
7

Pour autant que je sache, cela 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é là-dedans en utilisant margin: auto et éventuellement vertical-align. Sinon, vous aurez besoin de Javascript pour le faire.

Pekka
la source
+1 pour la chose "margin: auto". J'ai déjà essayé de centrer horizontalement un div en utilisant la ligne "margin: 0 auto" - le "0" s'appliquant aux marges verticales et le "auto" horizontal. Je pense que c'est ce que StackOverflow utilise pour le div très haut niveau pour obtenir les 2 bordures blanches épaisses sur les côtés de la page. Cependant, la page W3Schools sur la marge CSS indique pour la valeur automatique que "Le résultat dépend du navigateur" - je ne l'ai pas personnellement essayé sur de nombreux navigateurs différents, donc je ne peux pas vraiment commenter ce point (mais cela fait évidemment l'affaire dans certains d'entre eux)
Steg
1
il est possible pour une largeur (et une hauteur) inconnue si IE8 n'est pas un problème. Voir ma réponse pour plus de détails.
ProblemsOfSumit
7

Je voudrais 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é: /// cela fait que la barre de défilement horizontale n'apparaît pas avec de grands éléments dans la div centrée.

<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>
Fiole
la source
6

Voici un plugin jQuery utile pour ce 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)
    });
};
Ben Shelock
la source
c'est la meilleure façon, et surtout avec un design répétitif.
m4tm4t
Serait trivial si jQuery était utilisé dans tous les cas
Code Whisperer
8
ce n'est PAS la meilleure façon. Il est toujours préférable d'utiliser CSS dans la mesure du possible. Centrer un DIV est possible avec CSS dans chaque axe et aussi pour les pages responsives. Pas besoin de JavaScript!
ProblemsOfSumit
1
@yckart et dans ce cas, l'outil est CSS.
ProblemsOfSumit
5

version sass / compass de la solution réactive ci-dessus:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}
Adam Spence
la source
4
transform: translate(-50%, -50%)rend le texte et tous les autres contenus flous sur OS X à l'aide des navigateurs webkit. keithclark.co.uk/articles/gpu-text-rendering-in-webkit
Yasha
Utilisez simplement le type d'anticrénelage que vous aimez, -webkit-font-smoothing: antialiased;je l'ai glané dans l'article que vous avez posté!
Adam Spence
4

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

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

JSFiddle ici

vp_arth
la source
4

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;
}
Alan
la source
C'est la réponse de @Matthias Weiler 5 ans plus tard.
aloisdg passe à codidact.com
3

Je sais que j'ai déjà fourni une réponse, et ma réponse précédente, ainsi que d'autres données, fonctionne très bien. Mais je l'ai utilisé dans le passé et cela fonctionne mieux sur certains navigateurs et dans certaines situations. J'ai donc pensé que je donnerais aussi cette réponse. Je n'ai pas "édité" ma réponse précédente et je ne l'ajoute pas car je pense que c'est une réponse entièrement distincte et que les deux que j'ai 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;
}
Dustin Poissant
la source
3 
#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
Burcu AKCAOGLU
la source
2

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/

Dustin Poissant
la source
2

Cette solution fonctionne si l'élément a widthetheight 

.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>
Développer l'extrait

Mo.
la source
2

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 d'utiliser ce

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>
Développer l'extrait

Marcogomesr
la source
1

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 d'autres exemples ici


la source
1

C'est une astuce que j'ai trouvée pour faire flotter un DIV exactement au centre d'une page. Vraiment moche bien sûr, mais fonctionne dans tous

Points et tirets

<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, ces cinq années se sont écoulées, non?

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

Mr. B
la source
1 
.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

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

Vous pouvez placer l'image dans un div et ajouter un id 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;
}
Dworvin Vonstrangle
la source
0 

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

amit bende
la source
0

Une approche simple qui a fonctionné pour moi de 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é d'alignement de texte 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.

Terence Bandoian
la source