Wie kann ich Elemente in einem div vertikal ausrichten?

Question

Ich habe eine div mit zwei Bildern und einem h1 . Alle müssen innerhalb des Divs vertikal nebeneinander ausgerichtet sein.

Eines der Bilder muss sein absolute positioniert innerhalb der div .

Welches CSS ist erforderlich, damit dies auf allen gängigen Browsern funktioniert?

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

Answer 1

Vertikales und horizontales Ausrichten von Elementen

Verwenden Sie eine der beiden Möglichkeiten. Das Ergebnis wäre das gleiche:

1. Bootstrap 4
2. CSS3

1. Bootstrap 4.3+

Für die vertikale Ausrichtung: d-flex align-items-center

Für die horizontale Ausrichtung: d-flex justify-content-center

Für die vertikale und horizontale Ausrichtung: d-flex align-items-center justify-content-center

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center container">
  <div>I am in Center</div>
</div>

2. CSS 3

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}

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

<div class="container center">
    <div>I am in Center</div>
</div>

Answer 2

Eine Technik von einem Freund von mir:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

Demo aquí .

Answer 3

Um Blockelemente in der Mitte zu positionieren (funktioniert in Internet Explorer 9 und höher), benötigt es einen Wrapper div :

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

Answer 4

Bei fast allen Methoden muss die Höhe angegeben werden, aber oft haben wir keine Höhen.

Hier ist also ein CSS-3-Trick mit drei Zeilen, für den man die Höhe nicht kennen muss.

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

Sie wird sogar im IE9 unterstützt.

mit seinen Lieferantenpräfixen:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Quelle: Vertikal ausrichten mit nur 3 Zeilen CSS

Answer 5

Verwenden Sie diese Formel, und es wird immer ohne Risse funktionieren:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>