wake-up-neo.com

Auf einer bootstrap ansprechenden Seite, wie ein div zentriert wird

position a div at centre of a responsive page

Ich muss eine responsive Seite mit bootstrap erstellen, indem ich ein div in der Mitte einer Seite positioniere, wie im unten genannten Layout.

120
Rama Priya

UPDATE für Bootstrap 4

Einfachere vertikale Gitterausrichtung mit Flex-Box

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

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

163
ppollono

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

35
vocasle

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

15
user9299363

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

9
Zim

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

3
Matoeil

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>

enter image description here

1
jay

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.

1
simranjazz

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>
0
Tarun Rawat

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.

0

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