Wie zentriere ich einen Bootstrap-Container?

Question

Wie zentriere ich diesen Bootstrap-Container div? Ich will es so, dass ich die Seite sehe, die es vertikal auf der Seite mit Schwarz über und unter meinem div zentriert.

Demo:https://jsfiddle.net/yunr225g/

HTML:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 text-center"> 
     <img src="http://placehold.it/250x250"> 
     <button type="submit">Stay</button> 
    </div> 
    <div class="col-md-6 text-center"> 
     <img src="http://placehold.it/250x250"> 
     <button type="submit">Leave</button> 
    </div> 
    </div> 
</div> 

CSS:

body { 
    margin: 10px; 
    background:black; 
} 
button { 
    display:block; 
    text-align:center; 
    margin:0 auto; 
    margin:60px auto; 
    background:black; 
    border:2px solid #ffca00; 
    padding:30px; 
    width:250px; 
    color:#ffca00; 
    text-transform:uppercase; 
} 

Answer 1

Zunächst werden Sie alle übergeordneten Elemente des Containers zu height:100% setzen haben, oder Verwenden Sie height:100vh direkt. Verwenden Sie dann die position + transform Tricks, um es vertikal zu zentrieren.

Dies funktioniert gut auf größeren Bildschirmen, müssen Sie möglicherweise über Media-Abfragen + Break-Punkte für kleinere Bildschirme zwicken.

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
    background: black; 
} 
.container { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    border: 1px solid red; 
} 

jsFiddle

Oder diese CSS-Tabelle Ansatz versuchen, es scheint gut zu funktionieren, und hat keinen Einfluss auf Bootstrap Gitter. Beachten Sie, dass zwei zusätzliche divs als Wrapper hinzugefügt wurden.

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
    background: black; 
} 
.container1 { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
.container2 { 
    display: table-cell; 
    vertical-align: middle; 
} 

jsFiddle