Tôi cần tạo một trang đáp ứng bằng cách sử dụng bootstrap theo vị trí div ở giữa trang như trong bố cục được đề cập bên dưới.

CẬP NHẬT cho Bootstrap 4

Sắp xếp lưới dọc đơn giản hơn với hộp flex

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

Giải pháp cho 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>

Đây là một ví dụ đơn giản về div theo chiều ngang và chiều dọc được căn giữa trong tất cả các kích thước màn hình.

CSS:

html,
body {
    height: 100%;
}

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

HTML:

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

Ví dụ

Trong bootstrap 4

để tập trung trẻ em theo chiều ngang , sử dụng lớp bootstrap-4

justify-content-center

để tập trung trẻ em theo chiều dọc , sử dụng lớp bootstrap-4

 align-items-center

nhưng hãy nhớ đừng quên sử dụng lớp d-flex với đây là lớp tiện ích bootstrap-4, như vậy

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

Lưu ý: đảm bảo thêm các tiện ích bootstrap-4 nếu mã này không hoạt động

Cập nhật cho Bootstrap 4

Bây giờ Bootstrap 4 là flexbox, căn chỉnh dọc dễ dàng hơn. Đưa ra một div flexbox chiều cao đầy đủ, chỉ cần chúng tôi my-autocho lề trên và dưới ...

<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

Trung tâm dọc trong Bootstrap 4

Bạn không cần thay đổi bất cứ điều gì trong CSS, bạn có thể trực tiếp viết điều này trong lớp và bạn sẽ nhận được kết quả.

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

không có bảng hiển thị và không có bootstrap, tôi muốn làm điều đó

<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

Tốt trả lời ppollono. Tôi chỉ chơi xung quanh và tôi có một giải pháp tốt hơn một chút. CSS sẽ giữ nguyên, tức là:

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

Nhưng đối với HTML:

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

Điều này là đủ.

Không phải là cách tốt nhất, nhưng vẫn sẽ làm việc

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

Tôi nghĩ cách đơn giản nhất để thực hiện bố cục với bootstrap là như thế này:

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

tất cả những gì tôi đã làm là thêm các lớp div cho phép tôi căn giữa div, nhưng vì tôi không sử dụng tỷ lệ phần trăm, nên bạn cần chỉ định chiều rộng tối đa của div là trung tâm.

Bạn có thể sử dụng cùng phương thức này để căn giữa nhiều cột, bạn chỉ cần thêm nhiều lớp 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>

Lưu ý: tôi đã thêm một div với cột 12 cho md, sm và xs, nếu bạn không làm điều này với div đầu tiên với màu nền (trong trường hợp này là "blueviolet") sẽ sụp đổ, bạn sẽ có thể thấy các div con , nhưng không phải màu nền.

Đối với phiên bản thực tế của Bootstrap 4.3.1, hãy sử dụng

Phong cách

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

Mã

<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

Hãy thử điều này, ví dụ, tôi đã sử dụng một chiều cao cố định. Tôi nghĩ nó không ảnh hưởng đến kịch bản đáp ứng.

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

Trong Bootstrap 4, sử dụng:

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

Bạn cũng có thể thay đổi vị trí tùy thuộc vào những gì bạn muốn:

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

Tham khảo tại đây

Dưới đây là các quy tắc CSS đơn giản đặt bất kỳ div nào vào trung tâm

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

Giải pháp đơn giản nhất sẽ thêm một cột trống ở cả hai bên như dưới đây:

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