Wie zentriert man ein <div> auf einer Seite am besten vertikal und horizontal?

Question

Beste Methode zur Zentrierung einer <div> Element auf einer Seite sowohl vertikal als auch horizontal?

Ich weiß, dass margin-left: auto; margin-right: auto; wird auf der Horizontalen zentriert, aber wie kann man das am besten auch vertikal machen?

Answer 1

Einfache Lösung mit den Vorteilen von Flex Display

 <div style = 'display:flex; position:absolute; top:0; bottom:0; right:0; left:0; '>
      <div id = 'div_you_want_centered' style = 'margin:auto;'> 
           This will be Centered 
      </div>
 </div>

Überprüfen Sie http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Das erste div nimmt den gesamten Bildschirm ein und hat eine display:flex-Einstellung für jeden Browser. Das zweite div (zentriertes div) nutzt die Vorteile des display:flex div, wo margin:auto hervorragend funktioniert.

Hinweis Kompatibilität mit IE11+. (IE10 mit Präfix).

Answer 2

Ich glaube, es gibt zwei Möglichkeiten, ein Div mittels CSS zentriert auszurichten.

.middleDiv {
    position : absolute;    
    width    : 200px;
    height   : 200px;
    left     : 50%;
    top      : 50%;
    margin-left : -100px; /* half of the width  */
    margin-top  : -100px; /* half of the height */
}

Dies ist der einfachste und beste Weg. Für die Demo besuchen Sie bitte den untenstehenden Link:

http://w3webpro.blogspot.in/2013/07/how-to-make-div-horizontally-and.html

Answer 3

Wenn Sie die neuen Browser (IE10+) verwenden,

dann können Sie die Eigenschaft transform nutzen, um ein Div in der Mitte auszurichten.

<div class="center-block">this is any div</div>

Und css für diese sollte sein:

.center-block {
  top:50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
  position: absolute;
}

Der Haken an der Sache ist, dass Sie nicht einmal die Höhe und Breite des Divs angeben müssen, da es sich von selbst erledigt.

Wenn Sie ein Div in der Mitte eines anderen Divs positionieren möchten, können Sie die Position des äußeren Divs einfach wie folgt angeben relativ und dann beginnt dieses CSS für Ihr Div zu arbeiten.

Wie es funktioniert:

Wenn Sie links und oben 50 % angeben, wird das Div im unteren rechten Viertel der Seite platziert, wobei das obere linke Ende in der Mitte der Seite verankert wird. Das liegt daran, dass die Eigenschaften left/top (wenn sie in % angegeben werden) auf der Grundlage der Höhe des äußeren div (in Ihrem Fall des Fensters) berechnet werden.

Aber transform verwendet Höhe/Breite des Elements, um die Übersetzung zu bestimmen, so dass Sie div wird nach links (50% Breite) und oben (50% seiner Höhe) zu bewegen, da sie in Negativen gegeben sind, so dass es auf die Mitte der Seite ausrichten.

Wenn Sie ältere Browser (und leider auch IE9) unterstützen müssen, ist die Tabellenzelle die beliebteste Methode, die Sie verwenden können.

Answer 4

position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Erläuterung:

Geben Sie ihm eine absolute Positionierung (das übergeordnete Element sollte eine relative Positionierung haben). Dann wird die linke obere Ecke in die Mitte verschoben. Da Sie die Breite/Höhe noch nicht kennen, verwenden Sie css transform, um die Position relativ zur Mitte zu übersetzen. translate(-50%, -50%) reduziert die x- und y-Position der oberen linken Ecke um 50 % der Breite und Höhe.

Answer 5

Ich bevorzuge die folgende Technik, um eine Box sowohl vertikal als auch horizontal zu zentrieren:

Der Außenbehälter

• haben sollen display: table;

Der Innenbehälter

• haben sollen display: table-cell;
• haben sollen vertical-align: middle;
• haben sollen text-align: center;

Die Inhaltsbox

• haben sollen display: inline-block;
• sollte die horizontale Textausrichtung auf z.B. umstellen. text-align: left; o text-align: right; es sei denn, Sie möchten, dass der Text zentriert wird

Das Elegante an dieser Technik ist, dass können Sie Ihren Inhalt in das Inhaltsfeld einfügen, ohne sich um dessen Höhe oder Breite kümmern zu müssen!

Demo

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

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

Siehe auch diese Fiedel ¡!

---

EDIT

Ja, ich weiß, dass man mehr oder weniger die gleiche Flexibilität mit transform: translate(-50%, -50%); o transform: translate3d(-50%,-50%, 0); Die Technik, die ich vorschlage, wird von den Browsern weit besser unterstützt. Selbst bei Browsern mit Präfixen wie -webkit , -ms o -moz , transform bietet nicht ganz die gleiche Browserunterstützung.

Wenn Sie sich also um ältere Browser kümmern (z. B. IE9 und darunter), sollten Sie nicht transform für die Positionierung.