web-dev-qa-db-fra.com

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

J'ai une balise div avec width défini sur 800px . Lorsque la largeur du navigateur est supérieure à 800px , il ne faut pas étirer la div mais le placer au centre de la page.

csshtmlalignmentcenter
751
Shimmy
<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
1008
AgileJon

position: absolute puis top:50% et left:50% placent le bord supérieur au centre de l'écran verticalement, et le bord gauche au centre horizontalement, puis en ajoutant margin-top au négatif de la hauteur de la div i.e -100, le décale de 100, comme pour margin-left Cela se 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;
}
<div id="outPopUp"></div>

296
Summo

Modern Flexbox solution est la voie à suivre/à partir de 2015. justify-content: center est utilisé pour que l'élément parent aligne le contenu au centre de celui-ci.

HTML

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

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;
}
<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>

67
Manoj Kumar

  1. Voulez-vous dire que vous voulez le centrer verticalement ou horizontalement? Vous avez dit avoir spécifié la variable height à 800 pixels et que vous souhaitiez que la division ne s'étire pas lorsque la variable width était supérieure à celle ...

  2. Pour centrer horizontalement, vous pouvez utiliser l'attribut margin: auto; dans css. De plus, vous devrez vous assurer que les éléments body et html n'ont aucune marge ni aucun remplissage:

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

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

HTML

<body>
    <div class="centered">
        centered content
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}
38
Kevin Dungs
<div></div>

div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}
33
Mohammad

Vous pouvez aussi l'utiliser comme ça:

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>
27
RajeshKdev

Il suffit d’utiliser la balise center juste après la balise body et de terminer celle-ci juste avant

<body>
<center>
........your code here.....
</center>
</body>

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

14
Bharat Chhatre

Ceci 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

13
Roy

Ajoutez cette classe à la div que vous voulez centrer (qui devrait avoir une largeur définie):

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

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

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

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

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

Certaines configurations préexistantes d'un code ancien empêchant le centrage des pages div sont: 1. D'autres classes cachées dans des liens de feuille de style externes . 2) d'autres classes incorporées dans quelque chose comme un img Les commandes de format d'impression) . 3) le code de légende avec ID et/ou CLASSES sera en conflit avec une classe div nommée.

6
Dennis Struck

Centrer sans spécifier la largeur div:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

C'est quelque chose comme le fait la balise <center>, sauf que:

  • tous les éléments enfants directs en ligne (par exemple, <h1>) de <center> seront également positionnés de manière à centrer
  • l'élément inline-block peut avoir une taille différente (par rapport au paramètre display:block) en fonction des paramètres par défaut du navigateur.
5
user669677

Utilisez justify-content et align-items pour aligner une div horizontalement et verticalement

https://developer.mozilla.org/de/docs/Web/CSS/justify-contenthttps://developer.mozilla.org/en/docs/Web/CSS/align- articles

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

4
JFathi
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 à titre d'exemple. En projet réel, vous pouvez supprimer cette propriété.

4
Andrei Gordiichuk

Si vous avez du contenu régulier et pas seulement une ligne de texte, la seule raison possible que je connaisse est de calculer la marge.
Voici un exemple: 

HTML

<div id="supercontainer">
  <div id="middlecontainer">
    <div class="common" id="first">first</div>
    <div id="container">
      <div class="common" id="second">second</div>
      <div class="common" id="third">third</div>
    </div>
  </div>
</div>

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 1200px.
#middlecontainer est div avec le contenu de votre site; c'est width102px. Dans le cas où la width du contenu est connue, vous devez diviser la taille de la page en 2 et sous-produire la moitié du résultat de la width du contenu:
.__ 1200/2 - (102/2) = 549; 

Oui, je vois aussi que c’est DER GROSSE fail de CSS.

4
rodnower

Cela fonctionne également dans IE, contrairement aux marges automatiques.

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

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;
}
3
user3439263

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

Découvrez cet exemple (clic) . Très simple, et fonctionne également pour les hauteurs variables . Parfait si vous n'avez pas de contenu à hauteur fixe.

Et here (click) est un aperçu de Nice avec quelques autres solutions.

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

3
Wilt

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

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

3
Santosh Khalse

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

HTML

<div class="loadingImg"></div>

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();
1
Edye Chan

Si le contenu de votre centre se trouve au plus profond des autres divs, seule la marge peut vous sauver. Rien d'autre. Je le fais toujours face lorsque je n'utilise pas de framework comme Bootstrap.

1
Nurul Akter Towhid
.middle {
   margin: auto;
   text-align: center;
}
1
KBH
<parent>
 <child>
 </child>
</parent>

parent { position: parent } enfant { position: absolue, à gauche: 50%, transform: translateX (-50%) }

1
Levon
<body>
    <div style=" display: table; margin: 250 auto;">
        In center
    </div>
</body>

Si vous souhaitez modifier la position verticale, modifiez la valeur de 250 et vous pouvez organiser le contenu selon vos besoins. Il n'est pas nécessaire de donner la largeur et d'autres paramètres.

1
Aashutosh Shrivastava

obtenir la largeur de l'écran que faire marge restante 25% faire marge droite 25% de cette façon le contenu de votre conteneur sera assis au milieu . exemple: supposons que conteneur largeur = 800px; <

div class='container' width='device-width' id='updatedContent'> 
<p id='myContent'></p
<contents></contents>
<contents></contents>
</div>
if($("#myContent").parent===$("updatedContent"))
{
$("#myContent").css({
'left':'-(device-width/0.25)px';
'right':'-(device-width/0.225)px';
});
}
0
mark dibe

Une question assez ancienne avec beaucoup de réponses, mais pour une raison quelconque, aucune d'entre elles ne m'a vraiment aidé C'est ce qui a fonctionné pour moi et cela fonctionne également sur 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;
}
0
Osei-Bonsu Christian