Auf einer bootstrap ansprechenden Seite, wie ein div zentriert wird

CSS:

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML:

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

Beispiel Geige

In Bootstrap 4

um die Kinder horizontal zu zentrieren, benutze die Bootstrap-4 Klasse

justify-content-center

um die Kinder vertikal zu zentrieren, benutze die Bootstrap-4 Klasse

 align-items-center

aber denken Sie daran, vergessen Sie nicht, die d-flex-Klasse zu verwenden. Dies ist eine Bootstrap-4-Utility-Klasse wie diese

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <div class="bg-primary">MIDDLE</div>    
</div>

Hinweis: Stellen Sie sicher, dass Sie Bootstrap-4-Dienstprogramme hinzufügen, wenn dieser Code nicht funktioniert

Update für Bootstrap 4

Da Bootstrap 4 jetzt eine Flexbox ist, ist die vertikale Ausrichtung einfacher. Bei voller Höhe flexbox div, nur wir my-auto für gleichmäßige obere und untere Ränder ...

<div class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
      <h1 class="display-3">Hello, world!</h1>
    </div>
</div>

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center

Vertikale Mitte in Bootstrap 4

ohne display table und ohne bootstrap würde ich das lieber machen

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>


 html, body, .container-table {
    height: 100%;
}
.container-table {
    width:100vw;
  height:150px;
  border:1px solid black;
}
.vertical-center-row {
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

}

http://codepen.io/matoeil/pen/PbbWgQ

Sie müssen nichts in CSS ändern, Sie können dies direkt in der Klasse schreiben und Sie erhalten das Ergebnis.

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

Gute Antwort ppollono. Ich habe nur rumgespielt und eine etwas bessere Lösung gefunden. Das CSS würde gleich bleiben, d.h.

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

Aber für HTML:

<div class="container">
    <div class="vertical-center-row">
        <div align="center">TEXT</div>
    </div>
</div>

Das wäre genug.

Nicht der beste Weg, wird aber trotzdem funktionieren

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>

Ich denke, der einfachste Weg, das Layout mit bootstrap zu erstellen, ist wie folgt:

<section>
<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 200px; background-color: blueviolet;">
                <div>
                    <h1 style="color: white;">Content goes here</h1>
                </div>
            </div>
        </div>
    </div>
</div>

alles, was ich getan habe, war, Ebenen von Divs hinzuzufügen, mit denen ich das Div zentrieren konnte. Da ich jedoch keine Prozentsätze verwende, müssen Sie die maximale Breite des Divs angeben, um zentriert zu sein.

Sie können dieselbe Methode verwenden, um mehr als eine Spalte zu zentrieren. Sie müssen nur mehr div-Ebenen hinzufügen:

<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 400px; background-color: blueviolet;">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
                    <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
                        <h1 style="color: white;">Some content</h1>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
                        <p style="color: white;">More content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Hinweis: Ich habe ein div mit Spalte 12 für md, sm und xs hinzugefügt. Wenn Sie dies nicht tun, wird das erste div mit Hintergrundfarbe (in diesem Fall "blueviolet") zusammenbrechen, und Sie können die untergeordneten divs sehen , aber nicht die Hintergrundfarbe.

Für die aktuelle Version von Bootstrap 4.3.1 verwenden

Stil

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
    height: 100%;
}
</style>

Code

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div