Wie kann man ein <div> mit CSS leicht horizontal zentrieren?

Question

Ich versuche, eine horizontale Zentrierung einer <div> Blockelement auf einer Seite und setzen Sie es auf eine Mindestbreite. Wie lässt sich dies am einfachsten bewerkstelligen? Ich möchte das <div> Element inline mit dem Rest der Seite zu sein. Ich werde versuchen, ein Beispiel zu zeichnen:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

Answer 1

Im Falle einer unbefestigte Breite div (d. h. Sie wissen nicht, wie viel Platz das div einnehmen wird).

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}

<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

Beachten Sie, dass die Breite der #yourdiv ist dynamisch -> er wächst und schrumpft, um den Text darin aufzunehmen.

Sie können die Browserkompatibilität unter Caniuse

Answer 2

In den meisten Browsern funktioniert dies:

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}

<div class="centre">Some Text</div>

Im IE6 müssen Sie eine weitere äußere div :

div.layout {
  text-align: center;
}

div.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<div class="layout">
  <div class="centre">Some Text</div>
</div>

Answer 3

margin: 0 auto;

als ck hat gesagt , Min-Breite wird nicht von allen Browsern unterstützt

Answer 4

Der Titel der Frage und der Inhalt sind tatsächlich unterschiedlich, daher werde ich zwei Lösungen für diese Frage veröffentlichen, indem ich Flexbox .

Ich denke Flexbox wird die derzeitige Standardlösung ersetzen/ergänzen, wenn IE8 und IE9 vollständig zerstört sind ;)

Prüfen Sie die aktuelle Browser-Kompatibilitätstabelle für Flexbox

Einzelnes Element

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

<div class="container">
  <img src="http://placehold.it/100x100">
</div>

Mehrere Elemente, aber nur ein zentrales

Das Standardverhalten ist flex-direction: row wodurch alle untergeordneten Elemente in einer einzigen Zeile ausgerichtet werden. Die Einstellung auf flex-direction: column helfen, die Zeilen zu stapeln.

.container {
  display: flex;
  flex-direction: column;
}
.centered {
  align-self: center;
}

<div class="container">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </p>
  <div class="centered"><img src="http://placehold.it/100x100"></div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>

Answer 5

Wenn alte Browser kein Thema sind, verwenden Sie HTML5 / CSS3. Wenn doch, wenden Sie Polyfills an und verwenden Sie trotzdem HTML5/CSS3. Ich gehe davon aus, dass Ihr div hier keine Ränder oder Abstände hat, aber sie sind relativ einfach zu berücksichtigen. Der Code folgt.

.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Das bedeutet Folgendes:

1. Positionieren Sie die div relativ zu seinem Container;
2. Positionieren Sie die div linke Grenze bei 50% von seine Containerbreite waagerecht;
3. Horizontal zurückschieben um 50% der die div eigene Breite .

Es ist leicht vorstellbar, dass dieser Prozess bestätigt, dass die div würde schließlich horizontal zentriert werden. Als Bonus können Sie vertikal zentrieren ohne zusätzliche Kosten:

.centered-vertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Der Vorteil dieses Ansatzes ist, dass Sie keine kontraintuitiven Dinge tun müssen, wie z.B. Ihr div als eine Art Text zu betrachten, es in einen (oft semantisch nutzlosen) zusätzlichen Container zu packen oder ihm eine feste Breite zu geben, was nicht immer möglich ist.

Vergessen Sie nicht die Hersteller-Präfixe für transform falls erforderlich.