Comment aligner un au milieu (horizontalement / largeur) de la page

J’ai une balise div avec une width définie sur 800px . Lorsque la largeur du navigateur est supérieure à 800px , il ne devrait pas étirer le div mais il devrait l’amener au milieu de la page.

  
centered content

position: absolute puis en top:50% et à left:50% place le bord supérieur au centre vertical de l’écran et le bord gauche au centre horizontal, puis en ajoutant margin-top au négatif de la hauteur de la div, par exemple -100 le décale ci-dessus par 100, de même pour la margin-left . Cela obtient div exactement au centre de la page.

 #outPopUp { position: absolute; width: 300px; height: 200px; z-index: 15; top: 50%; left: 50%; margin: -100px 0 0 -150px; background: red; } 
 
  1. Voulez-vous dire que vous voulez le centrer verticalement ou horizontalement? Vous avez dit que vous avez spécifié la height à 800px, et que vous vouliez que le div ne s’étire pas lorsque la width était supérieure à celle …

  2. Pour centrer horizontalement, vous pouvez utiliser la margin: auto; atsortingbut dans css. De plus, vous devrez vous assurer que les éléments body et html n’ont pas de marge ni de remplissage:

 html, body { margin: 0; padding: 0; } #centeredDiv { margin-right: auto; margin-left: auto; width: 800px; } 

La solution Flexbox moderne est la voie à suivre à partir de 2015. basée sur justify-content: center est utilisé pour que l’élément parent aligne le contenu au centre.

HTML

 
Center

CSS

 .container { display: flex; justify-content: center; } .center { width: 800px; } 

Sortie

 .container { display: flex; justify-content: center; } .center { width: 800px; background: #5F85DB; color: #fff; font-weight: bold; font-family: Tahoma; } 
 
Centered div with left aligned text.

Pour que cela fonctionne également correctement dans Internet Explorer 6, vous devez le faire comme suit:

HTML

  
centered content

CSS

 body { margin: 0; padding: 0; text-align: center; /* !!! */ } .centered { margin: 0 auto; text-align: left; width: 800px; } 
 
 div { display: table; margin-right: auto; margin-left: auto; } 

Vous pouvez aussi l’utiliser comme ceci:

 
Your contents here...

Utilisez simplement la balise centrale juste après la balise body et terminez la balise centrale juste avant la fin du corps

  
........your code here.....

Cela a fonctionné pour moi avec tous les navigateurs que j’ai essayés

Ajoutez cette classe au div que vous souhaitez centrer (qui doit avoir une largeur définie):

 .marginAutoLR { margin-right:auto; margin-left:auto; } 

Ou ajoutez les éléments de marge à votre classe div, comme ceci:

 .divClass { width:300px; margin-right:auto; margin-left:auto; } 

Utilisez la propriété css flex : http://jsfiddle.net/cytr/j7SEa/6/show/

 body { /* centerized */ display: box; flex-align: center; flex-pack: center; } 

Cela peut être facilement réalisé via un conteneur flexible.

 .container{ width: 100%; display: flex; height: 100vh; justify-content: center; } .item{ align-self: center; } 

Lien de prévisualisation

Certaines autres configurations préexistantes à partir d’un ancien code qui empêcheront le centrage des pages div sont: 1) les autres classes cachées dans les liens externes de la feuille de style. 2) autres classes incorporées dans quelque chose comme un img (comme pour les anciens contrôles de format d’impression CSS externes). 3) le code de légende avec les identifiants et / ou les CLASSES sera en conflit avec une classe div nommée.

Centrage sans spécifier de largeur de div:

 body { text-align: center; } body * { text-align: initial; } body div { display: inline-block; } 

C’est quelque chose comme la

, sauf que:

  • tous les éléments enfants en ligne directs (par exemple,

    ) de

    seront également positionnés pour centrer
  • L’élément inline-block peut avoir une taille différente (comapred à display:block paramétrage du display:block ) en fonction des parameters par défaut du navigateur
 body, html{ display:table; height:100%; width:100%; } .container{ display:table-cell; vertical-align:middle; } .container .box{ width:100px; height:100px; background:red; margin:0 auto; } 

http://jsfiddle.net/NPV2E/

“width: 100%” pour la balise “body” c’est seulement par exemple. Dans un projet réel, vous pouvez supprimer cette propriété.

Si vous avez un contenu régulier et non une seule ligne de texte, la seule raison possible est de calculer la marge.
Voici un exemple:

HTML

 
first
second
third

CSS

 body { margin: 0; padding: 0; } .common { border: 1px solid black; } #supercontainer { width: 1200px; background: aqua; float: left; } #middlecontainer { float: left; width: 104px; margin: 0 549px; } #container { float: left; } #first { background: red; height: 102px; width: 50px; float: left; } #second { background: green; height: 50px; width: 50px; } #third { background: yellow; height: 50px; width: 50px; } 

Donc, #supercontainer est votre "whole page" et sa width est de 1200px .
#middlecontainer est div avec le contenu de votre site; c’est la width 102px . Si la width du contenu est connue, vous devez diviser la taille de la page par 2 et le sous-substrat par la moitié de la width du contenu:
1200/2 – (102/2) = 549;

Oui, je vois également que c’est DER GROSSE fail of CSS.

Utiliser des justify-content et align-items pour aligner horizontalement et verticalement un div

https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/fr/docs/Web/CSS/align-items

 html, body, .container { height: 100%; width: 100%; } .container { display: flex; align-items: center; justify-content: center; } .mydiv { width: 80px; } 
 
h & v aligned

Cela fonctionne également dans IE, les marges automatiques ne le font pas.

 .centered { position: absolute; display: inline-block; left: -500px; width: 1000px; margin: 0 50%; } 

Div centré verticalement et horizontalement à l’intérieur du parent sans fixer la taille du contenu

Découvrez cet exemple (cliquez) . Très simple, et fonctionne pour des hauteurs flexibles aussi. Parfait si vous n’avez pas de contenu à hauteur fixe.

Et ici (clic) est une belle vue d’ensemble avec d’autres solutions.

Et ici (cliquez) un autre exemple avec une solution de largeur flexible avec le fameux astuce -50%

Simple http://jsfiddle.net/8pd4qx5r/

 html { display: table; height: 100%; width: 100%; } body { display: table-cell; vertical-align: middle; } .content { margin: 0 auto; width: 260px; text-align: center; background: pink; } 

Utilisez le code ci-dessous pour centrer la boîte div:

 .box-content{ margin: auto; top: 0; right: 0; bottom: 0; left: 0; position: absolute; width: 800px; height: 100px; background-color: green; } 
 
 .middle { margin: auto; text-align: center; } 

Si le contenu de votre centre est profondément ancré dans d’autres divisions, seule la marge peut vous sauver. Rien d’autre. Je le fais toujours quand je n’utilise pas de framework comme Bootstrap.

  
In center

Si vous souhaitez modifier la position verticale, modifiez la valeur de 250 et vous pouvez organiser le contenu selon vos besoins. Il n’y a pas besoin de donner la largeur et d’autres parameters.

Dans mon cas, la taille de l’écran du téléphone est inconnue, voici ce que j’ai fait.

HTML

 

CSS

 .loadingImg{ position: fixed; top: 0px; left: 0px; z-index: 9999999; border:0; background: url('../images/loading.gif') no-repeat center; background-size: 50px 50px; display: block; margin: 0 auto; -webkit-border-radius: 50px; border-radius: 50px; } 

JS (avant de devoir afficher cette DIV)

 $(".loadingImg").css("height",$(document).height()); $(".loadingImg").css("width",$(document).width()); $(".loadingImg").show(); 

Une très vieille question avec beaucoup de réponses, mais pour une raison quelconque, aucun d’entre eux n’a vraiment fonctionné pour moi. C’est ce qui a fonctionné pour moi et ça marche aussi dans le navigateur:

 .center { text-align: center; height: 100%; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; } 

obtenir la largeur de l’écran que de faire la marge laissée 25% faire une marge droite de 25% de cette manière le contenu de votre conteneur sera assis au milieu. exemple: supposons que container width = 800px; <

 div class='container' width='device-width' id='updatedContent'> 

if($("#myContent").parent===$("updatedContent")) { $("#myContent").css({ 'left':'-(device-width/0.25)px'; 'right':'-(device-width/0.225)px'; }); }

     

parent {position: relative} enfant {position: absolu, gauche: 50%, transformer: translateX (-50%)}