Comment aligner a au milieu (horizontalement/largeur) de la page [dupliquer]

cette question a déjà une réponse ici:

j'ai une étiquette div avec width réglée à 800px . Lorsque la largeur du navigateur est supérieure à 800px , il ne pas étirer le div , mais cela doit l'amener au milieu de la page.

720
demandé sur Sunil Garg 2009-06-05 05:44:38
la source

27 ответов

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
969
répondu AgileJon 2012-03-07 20:48:20
la source

position: absolute et ensuite 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 à négatif de hauteur de la div I. le e-100 le déplace au-dessus de 100, de la même façon pour margin-left . Ceci met 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>  
285
répondu Summo 2017-08-18 17:11:27
la source

moderne Flexbox la solution est la voie à suivre/à partir de 2015. justify-content: center est utilisé pour l'élément parent pour aligner 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>
56
répondu Manoj Kumar 2018-07-02 00:49:30
la source
  1. voulez-vous dire que vous voulez le centrer verticalement ou horizontalement? Vous avez dit que vous aviez spécifié le height à 800px, et que vous vouliez que la div ne s'étire pas quand le width était plus grand que cela...

  2. pour centrer horizontalement, vous pouvez utiliser l'attribut margin: auto; dans css. De plus, vous devez vous assurer que les éléments body et html n'ont pas de marge ou de rembourrage:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
55
répondu Tomas Lycken 2016-01-09 22:15:29
la source

pour qu'il 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;
}
36
répondu Kevin Dungs 2012-08-20 23:23:55
la source
<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}
31
répondu Mohammad 2016-02-04 15:15:48
la source

, Vous pouvez aussi l'utiliser comme ceci:

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>
25
répondu RajeshKdev 2017-03-30 01:41:23
la source

utilisez simplement l'étiquette de Centre juste après l'étiquette de corps, et l'étiquette de Centre d'extrémité juste avant les extrémités de corps

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

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

14
répondu Bharat Chhatre 2012-05-11 15:44:51
la source

ajouter cette classe au div que vous voulez centré (qui devrait avoir une largeur définie):

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

Ou, ajouter la marge des trucs à votre div de classe, comme ceci:

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}
12
répondu Taylor Brown 2017-03-31 16:36:07
la source

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

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

.item{
 align-self: center;
}

Aperçu Lien

11
répondu Roy 2017-08-28 21:17:16
la source

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

body {                       /* centerized */
  display: box;
  flex-align: center;
  flex-pack: center;
}
10
répondu 2013-12-28 19:45:05
la source

quelques autres configurations préexistantes de l'ancien code qui empêchera le centrage de page div L & R sont: 1) autres classes cachées dans les liens externes de la feuille de style. 2) d'autres classes intégrées dans quelque chose comme un img (comme pour les contrôles externes plus anciens du format D'impression CSS). 3) le code de légende avec IDs et/ou CLASSES sera en conflit avec une classe div nommée.

6
répondu Dennis Struck 2012-05-16 21:20:32
la source

centrage sans spécifier la largeur de div:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

c'est quelque chose comme <center> tag does, excepté:

  • tous les directs inline childs éléments (par exemple. <h1> ) de <center> sera également placé au centre
  • inline-élément de bloc peut avoir des tailles différentes (comapred à display:block réglage) selon le navigateur par défaut
5
répondu Igor Ivancha 2016-02-04 14:53:02
la source
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 les "corps" de la balise c'est seulement par exemple. En projet réel, vous pouvez supprimer cette propriété.

4
répondu Andrei Gordiichuk 2013-11-19 20:09:45
la source

si vous avez un contenu régulier et pas seulement une ligne de texte, donc la seule raison possible que je sais 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 c'est width est 1200px .

#middlecontainer est div avec le contenu de votre site; il est width 102px . Dans le cas où, le width du contenu est connu, vous devez diviser la taille de la page à 2, et substruct à partir du résultat de la moitié du contenu width :

1200 / 2 - (102 / 2) = 549;

Oui, je suis aussi voir que c'est la DER GROSSE échec de la CSS.

4
répondu rodnower 2016-02-04 14:46:34
la source

utiliser 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/en/docs/Web/CSS/align-items

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
répondu JFathi 2016-11-03 21:30:08
la source

cela fonctionne dans IE aussi, les marges automatiques ne le font pas.

.centered {
    position:           absolute;
    display:            inline-block;
    left:           -500px;
    width:          1000px;
    margin:             0 50%;
}
3
répondu Glen 2012-04-10 00:02:04
la source

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

Check out cet exemple (clic) . Très simple, et fonctionne pour des hauteurs flexibles aussi. Parfait si vous ne vous contentez pas d'une hauteur fixe.

Et ici (clic) est un bon aperçu avec quelques autres solutions.

et ici (click) un autre exemple avec une solution de largeur flexible avec le fameux -50% trick

3
répondu Wilt 2017-05-23 15:18:25
la source

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
répondu Igor Ivancha 2016-02-04 14:47:39
la source

utilisez le code ci-dessous pour centrer la case div:

.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
répondu Santosh Khalse 2017-03-30 01:50:53
la source
.middle {
   margin: auto;
   text-align: center;
}
1
répondu KBH 2015-06-18 20:51:30
la source

si votre contenu de Centre est profond à l'intérieur d'autres divs alors seule marge peut vous sauver. Rien d'autre. Je l'affronte toujours quand je n'utilise pas framework comme Bootstrap.

1
répondu Nurul Akter Towhid 2016-10-26 01:07:25
la source
<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 votre besoin. Il n'est pas nécessaire de donner la largeur et les autres paramètres.

1
répondu Aashutosh Shrivastava 2017-03-30 01:49:37
la source

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 que vous devez montrer cette DIV)

$(".loadingImg").css("height",$(document).height());     
$(".loadingImg").css("width",$(document).width());     
$(".loadingImg").show(); 
1
répondu Edye Chan 2017-10-21 07:02:15
la source
<parent>
 <child>
 </child>
</parent>

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

1
répondu Levon 2018-08-18 00:12:28
la source

Une jolie vieille question avec beaucoup de réponses, mais pour une raison quelconque n'a pas fonctionné pour moi, vraiment. C'est ce qui a fonctionné pour moi, et il fonctionne sur navigateur ainsi:

.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
répondu Osei-Bonsu Christian 2015-10-29 11:13:23
la source

obtenir la largeur de l'écran que faire marge gauche 25% marge de droite 25% de cette façon, le contenu de votre conteneur sera placé au milieu . exemple: supposons que la largeur du conteneur = 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
répondu mark dibe 2018-05-25 22:55:26
la source

Autres questions sur html css alignment center