Ich muss eine reaktionsfähige Seite mit Bootstrap erstellen, indem ich ein Div in der Mitte einer Seite positioniere, wie im unten genannten Layout.

UPDATE für Bootstrap 4

Einfachere vertikale Gitterausrichtung mit Flexbox

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
  height: 100%
}

<div class="h-100 row align-items-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

Lösung für Bootstrap 3

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<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>

Es ist ein einfaches Beispiel für eine horizontale und vertikale Teilung, die in allen Bildschirmgrößen zentriert ist.

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 den Childs horizontal zentriert , Verwendung Bootstrap-4 - Klasse

justify-content-center

um die Childs vertikal zentriert , Verwendung Bootstrap-4 - Klasse

 align-items-center

Aber denken Sie daran, vergessen Sie nicht, die d-flex-Klasse mit diesen zu verwenden. Es handelt sich um eine Bootstrap-4-Dienstprogrammklasse

<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

Jetzt, da Bootstrap 4 Flexbox ist, ist die vertikale Ausrichtung einfacher. Bei einem Flexbox-Div in voller Höhe nur wir my-autofü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

Sie müssen nichts in CSS ändern. Sie können dies direkt in der Klasse schreiben und 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>

Ohne Anzeigetabelle und ohne Bootstrap würde ich das lieber tun

<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

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

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 erreichen, ist folgender:

<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 Div angeben, um zentriert zu werden.

Sie können dieselbe Methode verwenden, um mehr als eine Spalte zu zentrieren. Sie müssen lediglich weitere 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

Versuchen Sie dies. Für das Beispiel habe ich eine feste Höhe verwendet. Ich denke, es hat keinen Einfluss auf das Reaktionsszenario.

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>

Verwenden Sie in Bootstrap 4:

<div class="d-flex justify-content-center">...</div>

Sie können die Position auch ändern, je nachdem, was Sie möchten:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Referenz hier

Hier sind einfache CSS-Regeln, die jedes Div in den Mittelpunkt stellen

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Die einfachste Lösung besteht darin, auf beiden Seiten eine leere Spalte wie folgt hinzuzufügen:

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>

jsFiddle

HTML :

<div class="container" id="parent">
  <div class="row">
    <div class="col-lg-12">text
      <div class="row ">
        <div class="col-md-4 col-md-offset-4" id="child">TEXT</div>
      </div>
    </div>
  </div>
</div>

CSS :

#parent {    
    text-align: center;
}
#child {
    margin: 0 auto;
    display: inline-block;
    background: red;
    color: white;
}