Flexbox: Zentrierung in der Mitte des Bildschirms

Wenn ich werde Mitte ein element in der Mitte des Bildschirms mit flexbox, ist dieser code elegantesten?

http://codepen.io/vennsoh/pen/wEAmz

HTML

<div class='btn'></div>

CSS

body{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}

.btn{
  width: 10rem;
  height: 10rem;
  background-color: #033649;
  margin: auto;
}

Scheint es, dass ich mit position: absolute und height+Gewicht 100% zu erreichen.

InformationsquelleAutor Vennsoh | 2013-12-08
  1. 15

    Müssen Sie mit position: absolute, da der Standardwert für ein element position: relative, und in diesem Fall gibt es nichts zu relativ zu weil Sie haben den flex-container der Körper.

    Dein code funktioniert Prima, aber es gibt ein Befehl zum zentrieren von Objekten in der aktuellen flex-Modell selbst so:

    body{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /*centers items on the line (the x-axis by default)*/
  align-items: center; /*centers items on the cross-axis (y by default)*/
}

    Wenn Sie dies tun, können Sie Sie entfernen das margin: auto von Ihr .btn-Klasse vielleicht einige geben, die mehr Spielraum in Ihrem code.

    Hier ist eine gute Ressource für alle Dinge, die flexbox.

    • Danke für die Antwort.
    InformationsquelleAutor shan
Schreibe einen Kommentar