Frage Wie zentriere ich ein Div für alle Browser?


Ich möchte ein zentrieren div vertikal mit CSS. Ich möchte keine Tabellen oder JavaScript, sondern nur reines CSS. Ich habe einige Lösungen gefunden, aber allen fehlt die Unterstützung von Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

Wie kann ich ein zentrieren? div vertikal in allen gängigen Browsern, einschließlich Internet Explorer 6?


1097
2017-12-28 12:57


Ursprung


Antworten:


Unten ist die beste Allround-Lösung, die ich bauen könnte, um eine feste Breite vertikal und horizontal zu zentrieren, flexible Höhe Inhaltsfeld Es wurde getestet und funktioniert für die letzten Versionen von Firefox, Opera, Chrome und Safari.

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Anzeigen eines Arbeitsbeispiels mit dynamischem Inhalt

Ich habe einen dynamischen Inhalt eingebaut, um die Flexibilität zu testen, und würde gerne wissen, ob jemand Probleme damit sieht. Es sollte auch gut für zentrierte Überlagerungen funktionieren - Lightbox, Pop-Up usw.


1133
2018-05-31 03:13



Noch eins kann ich nicht auf der Liste sehen:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • Cross-Browser (einschließlich Internet Explorer 8 - Internet Explorer 10 ohne Hacks!)
  • Responsive mit Prozentsätzen und min- / max-
  • Zentriert unabhängig von der Füllung (ohne Box-Sizing!)
  • height muss deklariert werden (siehe Variable Höhe)
  • Empfohlene Einstellung overflow: auto um Content-Spillover zu verhindern (siehe Überlauf)

Quelle: Absolute horizontale und vertikale Zentrierung in CSS


244
2017-08-13 03:08



Der einfachste Weg wäre folgender 3 Zeilen von CSS:

position: relative;
top: 50%;
transform: translateY(-50%);

Es folgt ein Beispiel:

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>


163
2017-12-17 18:30



Eigentlich benötigen Sie zwei Divs für die vertikale Zentrierung. Das div, das den Inhalt enthält, muss eine Breite und Höhe haben.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Hier ist das Ergebnis


126
2017-12-28 15:15



Dies ist die einfachste Methode, die ich gefunden habe und ich benutze sie die ganze Zeit (jsFiddle Demo hier)

Vielen Dank Chris Coyier von CSS Tricks für Dieser Artikel.

.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Support beginnt mit IE8.


73
2018-02-20 21:05



Nach vielen Recherchen fand ich endlich die ultimative Lösung. Es funktioniert sogar für schwebende Elemente. Quelltext anzeigen 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

49
2018-05-19 12:04



Um das div auf einer Seite zu zentrieren, Überprüfe den Geigen-Link.

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

Eine weitere Option ist die Verwendung von Flex Box, Überprüfe den Geigen-Link.

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Eine andere Option ist die Verwendung einer CSS 3-Transformation:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>


31
2017-08-13 04:06



Jetzt ist die Flexbox-Lösung ein sehr einfacher Weg für moderne Browser, daher empfehle ich dies für Sie:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>


30
2017-12-15 13:08