Centering Percentage Width/Height Elements

Wenn Sie die genaue Breite/Höhe eines Elements kennen, können Sie es mit diesem klassischen Trick ganz einfach genau in der Mitte seines Elternelements zentrieren: top und left auf 50% und negative Ränder, die der Hälfte der Breite und Höhe des Elements entsprechen. Das ist großartig, wenn Sie die Breite und Höhe des Elements kennen, das Sie zentrieren möchten, aber was ist, wenn es sich um Prozentsätze handelt?

Man würde denken, man könnte einfach negative Prozent-Ränder verwenden. Das funktioniert für horizontale Ränder, aber Ränder basieren auf der Breite (auch vertikale Ränder), daher funktioniert es nicht, wenn man versucht, einen negativen oberen Rand zu verwenden, um Dinge in Position zu ziehen.

Es gibt einen kleinen Trick mit einem "Ghost"-Pseudo-Element und inline-block/vertical-align, der ziemlich clever ist. Aber das erfordert, dass das zu zentrierende Element inline-block ist, und das ist kein sehr häufiges Szenario. Wahrscheinlicher ist, dass Sie versuchen, etwas wie ein modales Fenster genau in der Mitte zu zentrieren. Und da kleine Bildschirme / responsives Design ein großes Geschäft sind, ist es sehr wahrscheinlich, dass Sie möchten, dass Ihr Dialogfeld eine prozentuale Breite hat (oder ansonsten unbekannt ist, wie z. B. nur eine max-width).

Es gibt einen Weg! Ich habe diesen Trick von Mary Lou bei Codrops gesehen und ihr Artikel/Demo Nifty Modal Window Effects.

Anstatt negative Ränder zu verwenden, verwenden Sie negative translate() Transforms.

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  
  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);
  
  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

Verwenden Sie heutzutage, was immer Sie an Präfixen benötigen.

Da haben wir es dann

Check out this Pen!