CSS => Zentrierung

CSS-Transformation verwenden

CSS-Transformationen basieren auf der Größe der Elemente. Wenn Sie also nicht wissen, wie groß oder breit Ihr Element ist, können Sie es absolut 50% von oben und links von einem relativen Container positionieren und um 50% nach links und nach oben verschieben vertikal und horizontal zentrieren.

Beachten Sie, dass das Element bei dieser Technik an einer nicht ganzzahligen Pixelgrenze gerendert werden könnte, wodurch es verschwommen wirkt. Siehe diese Antwort in SO für eine Problemumgehung.

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Beispiel in JSFiddle anzeigen

CROSS BROWSER-KOMPATIBILITÄT

Die Transformationseigenschaft benötigt Präfixe, die von älteren Browsern unterstützt werden. Präfixe werden für Chrome <= 35, Safari <= 8, Opera <= 22, Android Browser <= 4.4.4 und IE9 benötigt. CSS-Umwandlungen werden von IE8 und älteren Versionen nicht unterstützt.

Hier ist eine allgemeine Transformationsdeklaration für das vorherige Beispiel:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

Weitere Informationen finden Sie unter canIuse .

MEHR INFORMATIONEN

Das Element wird gemäß dem ersten nicht statischen übergeordneten Element positioniert ( position: relative , absolute oder fixed ). Erfahren Sie mehr in dieser Geige und in diesem Dokumentationsthema .

Zum horizontalen Zentrieren verwenden Sie left: 50% und transform: translateX(-50%) . Das Gleiche gilt für die Nur-Vertikal-Zentrierung: Mitte mit top: 50% und transform: translateY(-50%) .

Die Verwendung von nicht statischen Breiten- / Höhenelementen mit dieser Zentriermethode kann dazu führen, dass das zentrierte Element gestaucht erscheint. Dies geschieht meistens bei Elementen, die Text enthalten, und kann durch Hinzufügen von: margin-right: -50%; und margin-bottom: -50%; . Weitere Informationen finden Sie in dieser Geige .

Flexbox verwenden

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

html, body, .container {
  height: 100%;
}    
.container {
  display: flex;
  justify-content: center; /* horizontal center */
}
img {
  align-self: center; /* vertical center */
}

Zeige Ergebnis

HTML:

<img src="http://lorempixel.com/400/200" />

CSS:

html, body {
  height: 100%;
}   
body {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Zeige Ergebnis

Weitere Informationen zu Flexbox und zu den Stilen finden Sie unter Dynamische vertikale und horizontale Zentrierung in der Flexbox- Dokumentation.

Browser-Unterstützung

Flexbox wird von allen gängigen Browsern unterstützt, mit Ausnahme von IE-Versionen vor 10 .

Für einige aktuelle Browserversionen wie Safari 8 und IE10 sind Herstellerpräfixe erforderlich.

Für die schnelle Erstellung von Präfixen gibt es Autoprefixer , ein Tool von Drittanbietern.

Für ältere Browser (wie IE 8 & 9) ist ein Polyfill verfügbar .

Weitere Informationen zur Unterstützung von Flexbox-Browsern finden Sie in dieser Antwort .

Position verwenden: absolut

Arbeiten in alten Browsern (IE> = 8)

Automatische Ränder, gepaart mit Nullwerten für den left und right oder top und bottom Versatz, zentrieren absolut positionierte Elemente innerhalb des übergeordneten Elements.

Zeige Ergebnis

HTML

<div class="parent">
  <img class="center" src="http://lorempixel.com/400/200/" />
</div>

CSS

.parent {
  position: relative;
  height: 500px;
}

.center {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Elemente, die keine eigene implizite Breite und Höhe haben wie Bilder, benötigen diese Werte.

Andere Ressourcen: Absolute Zentrierung in CSS

Geisterelementtechnik (Michał Czernows Hack)

Diese Technik funktioniert auch, wenn die Abmessungen des Containers unbekannt sind.

Richten Sie ein "Ghost" -Element innerhalb des Containers mit einer Höhe von 100% ein. Verwenden Sie dann vertical-align: middle für das Element und das zu zentrierende Element.

CSS

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost element */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;

  /* There is a gap between ghost element and .centered,
  caused by space character rendered. Could be eliminated by
  nudging .centered (nudge distance depends on font family),
  or by zeroing font-size in .parent and resetting it back
  (probably to 1rem) in .centered. */
  margin-right: -0.25em;
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  white-space: normal; /* Resetting inherited nowrap behavior */
}

HTML

<div class="block">
  <div class="centered"></div>
</div>

Verwenden Sie Textausrichtung

Die häufigste und einfachste Art der Zentrierung sind die Textzeilen in einem Element. CSS hat die Regel text-align: center für diesen Zweck:

HTML

<p>Lorem ipsum</p>

CSS

p {
    text-align: center;
}

Dies funktioniert nicht zum Zentrieren ganzer Blockelemente . text-align Kontrollen nur Ausrichtung von Inline - Inhalt wie Text in seinem übergeordneten Blockelement.

Weitere text-align im Abschnitt Typografie .

Zentrierung in Bezug auf einen anderen Artikel

Wir werden sehen, wie Inhalte basierend auf der Höhe eines nahen Elements zentriert werden.

Kompatibilität: IE8 +, alle anderen modernen Browser.

HTML

<div class="content">
  <div class="position-container">
    <div class="thumb">
      <img src="http://lorempixel.com/400/200/">
    </div>
    <div class="details">
      <p class="banner-title">text 1</p>
      <p class="banner-text">content content content content content content content content content content content content content content</p>
      <button class="btn">button</button>
    </div>
  </div>
</div>

CSS

.content * {
  box-sizing: border-box;
}
.content .position-container {
  display: table;
}
.content .details {
  display: table-cell;
  vertical-align: middle;
  width: 33.333333%;
  padding: 30px;
  font-size: 17px;
  text-align: center;
}
.content .thumb {
  width: 100%;
}
.content .thumb img {
  width: 100%;
}

Link zu JSFiddle

Die Hauptpunkte sind die 3. .thumb , .details und .position-container :

Der .position-container muss .position-container display: table .
Die .details müssen die tatsächliche Breite der width: .... und display: table-cell , vertical-align: middle .
Die .thumb muss width: 100% wenn Sie möchten, dass der gesamte verbleibende Speicherplatz belegt wird und die Breite der .details beeinflusst wird.
Das Bild (wenn Sie ein Bild haben) in .thumb sollte eine width: 100% , ist aber nicht erforderlich, wenn Sie korrekte Proportionen haben.

Vertikale Ausrichtung mit 3 Codezeilen

Unterstützt von IE11 +

Zeige Ergebnis

Verwenden Sie diese 3 Linien, um praktisch alles vertikal auszurichten. Stellen Sie einfach sicher, dass das div / image, auf das Sie den Code anwenden, ein übergeordnetes Element mit einer Höhe hat.

CSS

div.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<div class="vertical">Vertical aligned text!</div>

Bild vertikal innerhalb von div ausrichten

HTML

<div class="wrap">
    <img src="http://lorempixel.com/400/200/" />
</div>

CSS

.wrap {
    height: 50px;/* max image height */
    width: 100px;
    border: 1px solid blue;
    text-align: center;
}
.wrap:before {
  content:"";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

img {
    vertical-align: middle;
}

Horizontale und vertikale Zentrierung mit Tabellenlayout

Ein untergeordnetes Element kann leicht mit Hilfe der table zentriert werden.

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.wrapper { 
    display: table; 
    vertical-align: center; 
    width: 200px; 
    height: 200px; 
    background-color: #9e9e9e; 
}
.parent { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}
.child { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    background-color: teal; 
}

Calc () verwenden

Die Funktion calc () ist Teil einer neuen Syntax in CSS3, in der Sie mathematisch berechnen können, welche Größe / Position Ihr Element mit verschiedenen Werten wie Pixeln, Prozentwerten usw. belegt calc(100% - 80px) immer auf den Abstand zwischen zwei Werten calc(100% - 80px) .

CSS

.center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    top: calc(50% - 50px / 2); /* height divided by 2*/
    left: calc(50% - 50px / 2); /* width divided by 2*/
}

HTML

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

Dynamische Höhenelemente vertikal ausrichten

Die intuitive Anwendung von css führt nicht zu den gewünschten Ergebnissen, weil

vertical-align:middle ist nicht auf Elemente auf Blockebene anwendbar
margin-top:auto und margin-bottom:auto verwendete Werte würden als Null berechnet werden
margin-top:-50% prozentuale Randwerte werden relativ zur Breite des enthaltenden Blocks berechnet

Für die breiteste Browserunterstützung eine Problemumgehung mit Hilfselementen:

HTML

<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">
      <!--stuff-->
    </div>
  </div>
</div>

CSS

.vcenter--container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.vcenter--helper {
  display: table-cell;
  vertical-align: middle;
}
.vcenter--content {
  margin: 0 auto;
  width: 200px;
}

jsfiddle aus der ursprünglichen Frage . Dieser Ansatz

arbeitet mit dynamischen Höhenelementen
respektiert den Fluss der Inhalte
wird von älteren Browsern unterstützt

Zeilenhöhe verwenden

Sie können die Zeilenhöhe auch verwenden line-height um eine einzelne Textzeile in einem Container vertikal zu zentrieren:

CSS

div {
    height: 200px;
    line-height: 200px;
}

Das ist ziemlich hässlich, kann aber in einem <input /> -Element nützlich sein. Die line-height - Eigenschaft funktioniert nur , wenn der Text zentriert eine einzige Zeile erstreckt werden. Wenn der Text in mehrere Zeilen umbrochen wird, wird die resultierende Ausgabe nicht zentriert.

Vertikal und horizontal zentrieren, ohne sich um Höhe oder Breite zu kümmern

Mit der folgenden Technik können Sie einem HTML-Element Inhalte hinzufügen und sowohl horizontal als auch vertikal zentrieren, ohne sich um die Höhe oder Breite zu kümmern .

Der äußere Behälter

sollte display: table;

Der innere Behälter

sollte display: table-cell;
sollte vertical-align: middle;
sollte text-align: center;

Das Inhaltsfeld

sollte display: inline-block;
sollte die horizontale Textausrichtung z. text-align: left; oder text-align: right; , sofern Sie nicht möchten, dass der Text zentriert wird

Demo

HTML

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>

CSS

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

Siehe auch diese Geige !

Zentrierung mit fester Größe

Wenn die Größe Ihres Inhalts festgelegt ist, können Sie die absolute Positionierung auf 50% setzen, wobei der margin die Hälfte der Breite und Höhe Ihres Inhalts verringert:

HTML

<div class="center">
    Center vertically and horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* height * -0.5 */
}

Horizontale Zentrierung nur mit fester Breite

Sie können das Element horizontal zentrieren, auch wenn Sie die Höhe des Inhalts nicht kennen:

HTML

<div class="center">
    Center only horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */
}

Vertikale Zentrierung mit fester Höhe

Sie können das Element vertikal zentrieren, wenn Sie die Höhe des Elements kennen:

HTML

<div class="center">
    Center only vertically
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* width * -0.5 */
}

Mit Marge: 0 auto;

Objekte können mit dem margin: 0 auto; zentriert werden margin: 0 auto; wenn sie Blockelemente sind und eine definierte Breite haben.

HTML

<div class="containerDiv">
    <div id="centeredDiv"></div>
</div>

<div class="containerDiv">
    <p id="centeredParagraph">This is a centered paragraph.</p>
</div>

<div class="containerDiv">
    <img id="centeredImage" src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>

CSS

.containerDiv {
    width: 100%;
    height: 100px;
    padding-bottom: 40px;
}

#centeredDiv {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
}

#centeredParagraph {
    width: 200px;
    margin: 0 auto;
}

#centeredImage {
    display: block;
    width: 200px;
    margin: 0 auto;
}

Ergebnis:

JSFiddle-Beispiel: Objekte mit Rand zentrieren: 0 auto;

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

CSS
Zentrierung

Suche…

CSS-Transformation verwenden

CROSS BROWSER-KOMPATIBILITÄT

MEHR INFORMATIONEN

Flexbox verwenden

Position verwenden: absolut

Geisterelementtechnik (Michał Czernows Hack)

Verwenden Sie Textausrichtung

Zentrierung in Bezug auf einen anderen Artikel

Vertikale Ausrichtung mit 3 Codezeilen

Bild vertikal innerhalb von div ausrichten

Horizontale und vertikale Zentrierung mit Tabellenlayout

Calc () verwenden

Dynamische Höhenelemente vertikal ausrichten

Zeilenhöhe verwenden

Vertikal und horizontal zentrieren, ohne sich um Höhe oder Breite zu kümmern

Der äußere Behälter

Der innere Behälter

Das Inhaltsfeld

Demo

Zentrierung mit fester Größe

Horizontale Zentrierung nur mit fester Breite

Vertikale Zentrierung mit fester Höhe

Mit Marge: 0 auto;