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

Fügen Sie diese Klasse zu dem Div hinzu, das Sie zentrieren möchten (das eine bestimmte Breite haben sollte):

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

Oder fügen Sie das Randmaterial zu Ihrer div-Klasse hinzu, etwa so:

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

Answer 2

Verwenden Sie die CSS-Flex-Eigenschaft : http://jsfiddle.net/cytr/j7SEa/6/show/

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

Answer 3

Einige andere bereits existierende Setups aus älterem Code, die die Zentrierung der div-Seite L&R verhindern, sind:

1. Andere Klassen, die in externen Stylesheet-Links versteckt sind.
2. Andere Klassen, die in etwas wie eine img (wie bei älteren externen CSS-Druckformatsteuerungen).
3. Legendencode mit IDs und/oder CLASSES steht im Konflikt mit einem benannten div Klasse.

Answer 4

parent {
    position: relative;
}
child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

<parent>
  <child>
  </child>
</parent>

Answer 5

Verwenden Sie den folgenden Code, um das div-Feld zu zentrieren:

.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>