Muszę utworzyć responsywną stronę za pomocą bootstrap, umieszczając element div na środku strony, jak w poniższym układzie.

AKTUALIZACJA dla Bootstrap 4

Prostsze wyrównanie siatki w pionie dzięki modułowi 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>

Rozwiązanie dla 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>

To prosty przykład pionowego i poziomego elementu div wyśrodkowanego na wszystkich rozmiarach ekranu.

CSS:

html,
body {
    height: 100%;
}

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

HTML:

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

Przykładowe skrzypce

W bootstrapie 4

aby wyśrodkować dziecko w poziomie , użyj klasy bootstrap-4

justify-content-center

aby wyśrodkować dziecko w pionie , użyj klasy bootstrap-4

 align-items-center

ale pamiętaj, nie zapomnij użyć z nimi klasy d-flex, jest to klasa narzędziowa bootstrap-4, tak jak ta

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

Uwaga: upewnij się, że dodałeś narzędzia bootstrap-4, jeśli ten kod nie działa

Aktualizacja dla Bootstrap 4

Teraz, gdy Bootstrap 4 to flexbox, wyrównanie w pionie jest łatwiejsze. Biorąc pod uwagę element div o pełnej wysokości, tylko my my-autodla równych marginesów górnych i dolnych ...

<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

Pionowe centrum w Bootstrap 4

Nie musisz niczego zmieniać w CSS, możesz napisać to bezpośrednio w klasie, a otrzymasz wynik.

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

bez tabeli wyświetlania i bez bootstrapa, wolałbym to zrobić

<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

Dobra odpowiedź ppollono. Po prostu się bawiłem i znalazłem nieco lepsze rozwiązanie. CSS pozostałby taki sam, tj .:

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

Ale dla HTML:

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

To wystarczy.

Nie jest to najlepszy sposób, ale nadal będzie działać

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

Myślę, że najprostszy sposób na wykonanie układu za pomocą bootstrapa jest taki:

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

Wszystko, co zrobiłem, to dodanie warstw elementów div, które pozwoliły mi wyśrodkować element div, ale ponieważ nie używam procentów, musisz określić maksymalną szerokość elementu div, który ma być środkowy.

Możesz użyć tej samej metody, aby wyśrodkować więcej niż jedną kolumnę, wystarczy dodać więcej warstw div:

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

Uwaga: dodałem element div z kolumną 12 dla md, sm i xs, jeśli tego nie zrobisz, pierwszy element div z kolorem tła (w tym przypadku „blueviolet”) zwinie się, będziesz mógł zobaczyć podrzędne elementy div , ale nie kolor tła.

Dla aktualnej wersji Bootstrap 4.3.1 użyj

Styl

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

Kod

<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

Spróbuj tego, na przykład użyłem stałej wysokości. Myślę, że to nie wpływa na scenariusz responsywny.

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

W Bootstrap 4 użyj:

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

Możesz także zmienić pozycję w zależności od tego, co chcesz:

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

Odniesienie tutaj

body{
    height: 100vh;
} 
.container{
    height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container text-center d-flex align-items-center justify-content-center">
        <div>
            <div>
                <h1>Counter</h1>
            </div>
            <div>
                <span>0</span>
            </div>
            <div>
                <button class="btn btn-outline-primary">Decrease</button>
                <button class="btn btn-danger">Reset</button>
                <button class="btn btn-outline-success">Increase</button>
            </div>
        </div>
    </div>

możesz to zrobić również w ten sposób.

Oto proste reguły CSS, które umieszczają dowolny element div w środku

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

Najprostszym rozwiązaniem będzie dodanie jednej pustej kolumny po obu stronach, jak poniżej:

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