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

Der beste und flexibelste Weg

Der wichtigste Trick in dieser Demo ist, dass im normalen Fluss der Elemente von oben nach unten, so dass die margin-top: auto wird auf Null gesetzt. Ein absolut positioniertes Element verhält sich jedoch bei der Verteilung des freien Raums genauso und kann ebenfalls vertikal an der angegebenen Stelle zentriert werden top y bottom (Funktioniert nicht im IE7).

Dieser Trick funktioniert mit allen Größen von div .

div {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

<div></div>

Answer 2

Auch wenn dies nicht funktionierte, als der OP diese Frage stellte, denke ich, dass zumindest für moderne Browser die beste Lösung darin besteht, Folgendes zu verwenden Anzeige: flex o Pseudoklassen .

Ein Beispiel ist im Folgenden zu sehen fiddle . Hier ist die aktualisierte Geige .

Für Pseudoklassen ein Beispiel könnte sein:

.centerPseudo {
    display:inline-block;
    text-align:center;
}

.centerPseudo::before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0px;
}

Die Verwendung von Anzeige: flex nach css-tricks y MDN ist wie folgt:

.centerFlex {
  align-items: center;
  display: flex;
  justify-content: center;
}

Es gibt noch weitere Attribute für Flex, die in den oben genannten Links mit weiteren Beispielen erläutert werden.

Wenn Sie ältere Browser unterstützen müssen, die css3 nicht unterstützen, dann sollten Sie wahrscheinlich Javascript oder die in den anderen Antworten gezeigte Lösung mit fester Breite/Höhe verwenden.

Answer 3

Die Einfachheit dieser Technik ist verblüffend:
(Diese Methode hat zwar ihre Auswirkungen, aber wenn Sie nur ein Element unabhängig vom Fluss des restlichen Inhalts zentrieren müssen, ist das völlig in Ordnung. Mit Vorsicht verwenden)

Markup:

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan tellus purus, et mollis nulla consectetur ac. Quisque id elit at diam convallis venenatis eget sed justo. Nunc egestas enim mauris, sit amet tempor risus ultricies in. Sed dignissim magna erat, vel laoreet tortor bibendum vitae. Ut porttitor tincidunt est imperdiet vestibulum. Vivamus id nibh tellus. Integer massa orci, gravida non imperdiet sed, consectetur ac quam. Nunc dignissim felis id tortor tincidunt, a eleifend nulla molestie. Phasellus eleifend leo purus, vel facilisis massa dignissim vitae. Pellentesque libero sapien, tincidunt ut lorem non, porta accumsan risus. Morbi tempus pharetra ex, vel luctus turpis tempus eu. Integer vitae sagittis massa, id gravida erat. Maecenas sed purus et magna tincidunt faucibus nec eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mollis sem.</div>

Und CSS:

div {
  color: white;
  background: red;
  padding: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}   

Dadurch wird das Element auch horizontal und vertikal zentriert. Keine negativen Ränder, nur Macht der Transformationen. Auch sollten wir bereits über IE8 vergessen sollten wir nicht?

Answer 4

Ich würde verwenden translate :

Positionieren Sie zunächst die linke obere Ecke des Divs in der Mitte der Seite (mit position: fixed; top: 50%; left: 50% ). Dann, translate verschiebt es um 50 % der Höhe des Divs nach oben, um es vertikal auf der Seite zu zentrieren. Schließlich verschiebt translate das Div auch um 50 % seiner Breite nach rechts, um es horizontal zu zentrieren.

Ich denke, dass diese Methode besser ist als viele andere, da sie keine Änderungen am übergeordneten Element erfordert.

translate ist besser als translate3d in einigen Szenarien, da es von einer größeren Anzahl von Browsern unterstützt wird. https://caniuse.com/#feat=transforms2d

Zusammenfassend lässt sich sagen, dass diese Methode von allen Versionen von Chrome, Firefox 3.5+, Opera 11.5+, allen Versionen von Safari, IE 9+ und Edge unterstützt wird.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

  font-size: 20px;
  background-color: cyan;
  border: darkgreen 5px solid;
  padding: 5px;
  z-index: 100;
}

table {
    position: absolute;
    top: 0;
    left: 0;
}

td {
    position: relative;
    top: 0;
    left: 0;
}

<table>
<tr>
    <td>
        <div class="centered">This div<br />is centered</div>
        <p>
            Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
        </p>
    </td>
    <td>
        <p>
            Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
        </p>
    </td>
</tr>
</table>

Beachten Sie jedoch, dass bei dieser Methode das Div an einer Stelle bleibt, während die Seite gescrollt wird. Dies kann das sein, was Sie wollen, aber wenn nicht, gibt es eine andere Methode.

Wenn wir nun dasselbe CSS verwenden, aber die Position auf absolut gesetzt ist, befindet sie sich in der Mitte des letzten übergeordneten Elements, das eine absolute Position hat.

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

  font-size: 20px;
  background-color: cyan;
  border: darkgreen 5px solid;
  padding: 5px;
  z-index: 100;
}

table {
    position: absolute;
    top: 0;
    left: 0;
}

td {
    position: relative;
    top: 0;
    left: 0;
}

<table>
<tr>
    <td>
        <div class="centered">This div<br />is centered</div>
        <p>
            Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
        </p>
    </td>
    <td>
        <p>
            Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
        </p>
    </td>
</tr>
</table>

Answer 5

Meiner Meinung nach mit Flex-box:

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="parent">
  <div id="child">Hello World!</div>
</div>

Sie sehen, es gibt nur drei CSS-Eigenschaften, die Sie verwenden müssen, um das untergeordnete Element vertikal und horizontal zu zentrieren. display: flex; Aktivieren Sie für den Hauptteil einfach die Flex-box-Anzeige, justify-content: center; das untergeordnete Element vertikal zentrieren und align-items: center; waagerecht zentrieren. Um das beste Ergebnis zu sehen, füge ich einfach einige zusätzliche Stile hinzu:

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
  background: yellow;
}

#child {
  width: 100px;
  height: 100px;
  background: silver;
}

<div id="parent">
  <div id="child">Hello World!</div>
</div>

Wenn Sie mehr über Flex-box erfahren möchten, besuchen Sie W3Schulen , MDN o CSS-Tricks für weitere Informationen.