Comment centrer l’élément absolument positionné en 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 est inconnue .

J’ai essayé ça. Mais il faut l’ajuster en fonction de la largeur.

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

Des idées?

  
I am some centered shrink-to-fit content!
tum te tum

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 */ } 
  
I'm the content

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 prendre en charge IE8 et les versions infé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; } 
 
I'm always centered
doesn't matter how much text, height or width i have.
The dimensions or my parent are irrelevant as well

Vraiment bien post .. Je voulais juste append si quelqu’un veut le faire avec une balise div unique, alors voici la voie de sortie:

Prendre width comme 900px .

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

Dans ce cas, il faut connaître la width au préalable.

Centre absolu

HTML:

 

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 🙂

ce travail pour vertical et horizontal

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

et si vous voulez que le centre de l’élément soit parent, définissez la position du parent

  #parentElement{ position:relative } 

modifier:

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

  • Si vous voulez que le centre de l’élément soit parent, définissez la position du parent sur relative

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

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

A travaillé avec chrome et Firefox.

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 a aussi du sens et qui est élégante, alors voici mon avis 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; } 
  

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 une largeur et une hauteur de 100% et centrer l’élément à l’aide de margin: auto et éventuellement vertical-align. Sinon, vous aurez besoin de Javascript pour le faire.

J’aimerais append à la réponse de @bindince:

  
I am some centered shrink-to-fit content!
tum te tum

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

  
I am some centered shrink-to-fit content!
tum te tum

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) }); }; 

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

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

JSFiddle ici

version sass / compass de Responsive Solution ci-dessus:

 #content { position: absolute; left: 50%; top: 50%; @include vendor(transform, translate(-50%, -50%)); } 

Cela a fonctionné pour moi:

 

Je sais que j’ai déjà fourni une réponse, et ma réponse précédente, ainsi que d’autres données, fonctionnent très bien. Mais je l’ai utilisé par le passé et cela fonctionne mieux sur certains navigateurs et dans certaines situations. J’ai donc pensé à donner cette réponse également. Je n’ai pas “modifié” ma réponse précédente et l’ajoute parce que j’ai le sentiment que c’est une réponse entièrement distincte et que les deux que j’ai fournis ne sont pas liés.

HTML:

 

CSS:

 #parent { display: table; } #child { display: table-cell; vertical-align: middle; } 
 #container { position: relative; width: 100%; float:left } #container .item { width: 50%; position: absolute; margin: auto; left: 0; right: 0; } 

Fonctionne sur n’importe quelle largeur aléatoire aléatoire de l’élément positionné absolu que vous voulez avoir au centre de votre élément conteneur.

Démo

 
.container { position: relative; width: 100%; } .box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; }

HTML:

 
content

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

HTML

 

CSS

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

http://jsfiddle.net/f51rptfy/

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

Points et tirets

 
Perfectly Centered Content

Nettoyeur

Wow, que cinq ans se sont écoulés, n’est-ce pas?

 

Stays in the Middle

Vous pouvez placer l’image dans un div et append un identifiant div et avoir le CSS pour ce div avoir un text-align:center

HTML:

 
http://soffr.miximages.com/css/

CSS:

 #intro_img { text-align:center; } 
 #content { margin:0 auto; display:table; float:none;} 
  
I'm the content

Une approche simple qui m’a permis de centrer horizontalement un bloc de largeur inconnue:

 

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

Une propriété text-align peut être ajoutée au jeu 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.

J’ai utilisé une solution similaire:

 #styleName { position: absolute; margin-left: -"X"px; } 

Où “X” est la moitié de la largeur d’un div que je veux afficher. Fonctionne bien pour moi dans tous les navigateurs.

Essayez de ne pas utiliser le côté obscur du CSS. Évitez d’utiliser des valeurs négatives pour les marges. Je sais que parfois tu es obligé de faire des choses terribles comme une margin-left: -450px , mais tu pourrais probablement faire quelque chose comme ça right: 450px . C’est juste ma façon de travailler.