Wie wird die Zeile im Container vertikal zentriert?

Question

Standardmäßig wird die Zeile nach oben ausgerichtet.

Ich habe versucht, margin-top: auto; und Rand unten: Auto; aber funktioniert nicht. Auch vertikal ausgerichtet: Mitte; funktioniert auch nicht.

Gibt es eine einfache Lösung?

Dank

.container { 
 
background-color:black; 
 
height: 100px; 
 
} 
 

 
.row { 
 
background-color:#fff; 
 
height: 50px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    </div> 
 
</div>

Answer 1

Set Breite und Höhe für Zeile und

.row { 
    margin: 0 auto; 
} 

Answer 2

Grundsätzlich ist diese question is a duplicate. Es gibt verschiedene Zentrierungsmethoden für Bootstrap, die in dieser Frage erläutert werden. Dies funktioniert speziell für Ihr Szenario mit der row innerhalb der container. Hier sind zwei verschiedene Methoden ..

// method 1 flexbox 
.container-flex { 
    display: flex; 
    align-items: center; 
} 

// method 2 translatey 
.v-center { 
    position: relative; 
    transform: translatey(-50%); 
    top: 50%; 
} 

http://www.codeply.com/go/b6wTQTzoe1

Answer 3

Yo flexbox für diesen

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

Answer 4

<div class="inner"> 
    <p> 
     Text 
    </p> 
</div> 

.inner { 
    height: 200px; 
    width: 300px; 
    background: orange; 
    vertical-align: middle; 
    display: table-cell; 
} 

"Text" soll vertikal ausgerichtet werden kann. Display-Tabelle-Zelle arbeitet mit Vertical-Align. Ich denke, es sollte auch mit Inline-Elementen möglich sein.