Ausrichten eines <div> in der Mitte (horizontal/Breite) der Seite

Question

Ich habe eine div Tag mit width eingestellt auf 800 Pixel . Wenn die Browserbreite größer ist als 800 Pixel sollte es nicht zu einer Überdehnung der div aber es sollte in die Mitte der Seite gebracht werden.

Answer 1

.middle {
   margin:0 auto;
   text-align: center;
}

/* es bringt div in die Mitte */

Answer 2

Zentrierung ohne Angabe der div-Breite:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

Das ist etwa so <center> Tag tut, außer:

• alle direkten Inline-Kinderelemente (z.B.. <h1> ) von <center> wird auch in der Mitte positioniert
• inline-block-Element kann unterschiedliche Größen haben (im Vergleich zu display:block Einstellung) gemäß den Browser-Standardeinstellungen

Answer 3

Wenn Sie einen regelmäßigen Inhalt und nicht nur eine Textzeile haben, ist der einzige Grund, den ich kenne, die Berechnung des Seitenrands.

Hier ist ein Beispiel:

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

Also, #supercontainer ist Ihr "whole page" und seine width es 1200px .

#middlecontainer es div mit dem Inhalt Ihrer Website; es ist width 102px . Für den Fall, dass die width des Inhalts bekannt ist, müssen Sie die Größe der Seite durch 2 teilen und die Hälfte der Größe des Inhalts abziehen width aus dem Ergebnis: 1200 / 2 - (102 / 2) = 549;

Ja, ich sehe auch, dass es sich um der große Ausfall von CSS.

Answer 4

使用方法 justify-content y align-items zum horizontalen und vertikalen Ausrichten einer 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>

Answer 5

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%" für den "body"-Tag ist nur ein Beispiel. In einem echten Projekt können Sie diese Eigenschaft entfernen.