Làm thế nào để trung tâm theo chiều dọc một container trong Bootstrap?

Tôi đang tìm cách tập trung vào containerdiv theo chiều dọc jumbotronvà đặt nó ở giữa trang.

Các .jumbotronđã được thích nghi với chiều cao đầy đủ và chiều rộng của màn hình. Các .containerdiv có chiều rộng 1025pxvà nên được ở giữa trang (theo chiều dọc giữa).

Tôi muốn trang này có jumbotron thích ứng với chiều cao và chiều rộng của màn hình cùng với trung tâm chứa theo chiều dọc với jumbotron. Làm thế nào tôi có thể đạt được nó?

.jumbotron {
  height:100%;
  width:100%;
}
.container {
  width:1025px;
}
.jumbotron .container {
  max-width: 100%;
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container text-center">
        <h1>The easiest and powerful way</h1>
        <div class="row">
            <div class="col-md-7">
                 <div class="top-bg"></div>
            </div>

            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                <ul class="top-features">
                    <li>
                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
                        <p><strong>Check</strong><br>Constantly the status of your links.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
                        <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
                    </li>
                        <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
                        <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
                </ul>
            </div>
        </div>
    </div>
</div>

Cách hộp linh hoạt

Căn chỉnh dọc bây giờ rất đơn giản bằng cách sử dụng bố trí hộp Linh hoạt . Ngày nay, phương pháp này được hỗ trợ trong một loạt các trình duyệt web ngoại trừ Internet Explorer 8 & 9. Do đó, chúng tôi cần sử dụng một số hack / polyfill hoặc các cách tiếp cận khác nhau cho IE8 / 9.

Sau đây tôi sẽ chỉ cho bạn cách làm điều đó chỉ trong 3 dòng văn bản (bất kể cú pháp flexbox cũ) .

Lưu ý: tốt hơn là sử dụng một lớp bổ sung thay vì thay đổi .jumbotronđể đạt được sự liên kết dọc. Tôi sẽ sử dụng vertical-centertên lớp chẳng hạn.

Ví dụ ở đây (Một tấm gương trên jsbin) .

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

Ghi chú quan trọng (Được xem trong bản demo) :

1. Một tỷ lệ phần trăm giá trị của heighthay min-heightthuộc tính là tương đối so với heightcác yếu tố phụ huynh, do đó bạn nên xác định heightcủa cha mẹ một cách rõ ràng.

2. Cú pháp tiền tố / nhà cung cấp cũ được bỏ qua trong đoạn trích được đăng do sự ngắn gọn, nhưng tồn tại trong ví dụ trực tuyến.

3. Trong một số trình duyệt web cũ như Firefox 9 ^{(trong đó tôi đã thử nghiệm)} , bộ chứa flex - .vertical-centertrong trường hợp này - sẽ không chiếm dung lượng trống bên trong cha mẹ, do đó chúng ta cần chỉ định thuộc widthtính như : width: 100%.

4. Ngoài ra trong một số trình duyệt web như đã đề cập ở trên, mục flex - .containertrong trường hợp này - có thể không xuất hiện ở trung tâm theo chiều ngang. Có vẻ như được áp dụng sang trái / phải margincủa autokhông có bất kỳ ảnh hưởng đến mục flex.
   Vì vậy, chúng ta cần phải sắp xếp nó bằng cách box-pack / justify-content.

Để biết thêm chi tiết và / hoặc căn chỉnh cột dọc, bạn có thể tham khảo chủ đề bên dưới:

• căn dọc với Bootstrap 3

Cách truyền thống cho các trình duyệt web cũ

Đây là câu trả lời cũ tôi đã viết vào thời điểm tôi trả lời câu hỏi này. Phương pháp này đã được thảo luận ở đây và nó cũng hoạt động trong Internet Explorer 8 và 9. Tôi sẽ giải thích ngắn gọn:

Trong luồng nội tuyến, một phần tử mức nội tuyến có thể được căn chỉnh theo chiều dọc đến giữa bằng cách vertical-align: middlekhai báo. Thông số từ W3C :

Giữa
Căn chỉnh trung điểm dọc của hộp với đường cơ sở của hộp cha cộng với một nửa chiều cao x của cha mẹ.

Trong trường hợp .vertical-centerphần tử cha - phần tử trong trường hợp này - có một phần rõ ràng height, trong bất kỳ trường hợp nào nếu chúng ta có thể có phần tử con có cùng phần chính heightcủa phần tử cha mẹ, chúng ta sẽ có thể di chuyển đường cơ sở của phần tử cha đến điểm giữa của phần đầy đủ - đứa trẻ đáng kinh ngạc và đáng ngạc nhiên làm cho đứa trẻ trong dòng chảy mong muốn của chúng ta - cái .container- thẳng hàng với trung tâm theo chiều dọc.

Kết hợp tất cả lại với nhau

Điều đó đang được nói, chúng ta có thể tạo một phần tử chiều cao đầy đủ trong các phần tử .vertical-centerby ::beforehoặc ::aftergiả và cũng thay đổi displayloại mặc định của nó và phần tử con khác, .containerthànhinline-block .

Sau đó sử dụng vertical-align: middle;để sắp xếp các yếu tố nội tuyến theo chiều dọc.

Ở đây bạn đi:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

DEMO LÀM VIỆC .

Ngoài ra, để ngăn chặn các vấn đề bất ngờ trong màn hình nhỏ thêm, bạn có thể thiết lập lại chiều cao của phần tử giả đến autohoặc 0hoặc thay đổi nó displayloại để nonenếu cần thiết để:

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

CẬP NHẬT DEMO

Và một điều nữa:

Nếu có footer/ headerphần xung quanh container, tốt hơn là đặt các phần tử đó đúng ( relative, absolutetùy thuộc vào bạn.) Và thêm z-indexgiá trị cao hơn (để đảm bảo) để giữ chúng luôn ở trên đầu các phần tử khác.

Cập nhật 2019

Bootstrap 4 bao gồm flexbox, vì vậy phương pháp định tâm dọc dễ dàng hơn nhiều và không cần thêm CSS .

Chỉ cần sử dụng các lớp d-flexvà align-items-centertiện ích ..

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

http://www.codeply.com/go/ui6ABmMTLv

Quan trọng: Định tâm dọc có liên quan đến chiều cao . Hộp chứa chính của các mục bạn đang cố định ở giữa phải có chiều cao xác định . Nếu bạn muốn chiều cao của trang sử dụng vh-100hoặc min-vh-100trên cha mẹ! Ví dụ:

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>

thêm Bootstrap.css sau đó thêm nó vào css của bạn

   
html, body{height:100%; margin:0;padding:0}
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
 

.centering {
  float:none;
  margin:0 auto;
}

Now call in your page 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           Am in the Center Now :-)
        </div>
    </div>
</div>

Trong Bootstrap 4 :

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

justify-content-center

để định tâm cho trẻ 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;">
    <span class="bg-primary">MIDDLE</span>    
</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

Tôi biết đó không phải là câu trả lời trực tiếp cho câu hỏi này nhưng nó có thể giúp được ai đó

Kỹ thuật ưa thích của tôi:

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

Bản giới thiệu

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
  <div class="container text-center">
    <h1>The easiest and powerful way</h1>
    <div class="row">
      <div class="col-md-7">
        <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>

      <div class="col-md-5 iPhone-features">
        <ul class="top-features">
          <li>
            <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
            <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
          </li>
          <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
          <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
        </ul>
      </div>
    </div>
  </div>
</div>

Xem thêm Fiddle này !

Đã thử nghiệm trên IE, Firefox và Chrome.

.parent-container {
    position: relative;
    height:100%;
    width: 100%;
}

.child-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="parent-container">
    <div class="child-container">
        <h2>Header Text</h2>
        <span>Some Text</span>
    </div>
</div>

Tìm thấy trên https://css-tricks.com/centering-css-complete-guide/

cho trung tâm dọc bootstrap4 của một vài mặt hàng

d-flex cho các quy tắc flex

cột flex cho hướng dọc trên các mặt hàng

justify-content-centre để định tâm

kiểu = 'chiều cao: 300px;' phải có các điểm đặt trong đó trung tâm là calc hoặc sử dụng lớp h-100

sau đó cho trung tâm ngang div d-flex justify-content-centre và một số container

vì vậy chúng ta có 3 thẻ: div-cột -> div-row -> div-container

     <div class="d-flex flex-column justify-content-center bg-secondary" 
        style="height: 300px;">
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
      </div> 

Nếu bạn đang sử dụng Bootstrap 4, bạn chỉ cần thêm 2 div:

.jumbotron{
  height:100%;
  width:100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="jumbotron">
    <div class="d-table w-100 h-100">
      <div class="d-table-cell w-100 h-100 align-middle">
        <h5>
          your stuff...
        </h5>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>
                More stuff...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Các lớp: d-table, d-table-cell, w-100, h-100 và align-middle sẽ thực hiện công việc

Cung cấp cho lớp container

.container{
    height: 100vh;
    width: 100vw;
    display: flex;
}

Cung cấp cho div đó bên trong container:

align-content: center;

Tất cả nội dung bên trong div này sẽ hiển thị ở giữa trang.

Đây là cách mà tôi đang sử dụng để sắp xếp nội dung theo chiều dọc - trên cùng / giữa / dưới với bootstrap 3 hàng. Bootstrap 3 cột có cùng chiều cao và được sắp xếp theo chiều dọc.

/* columns of same height styles */

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}
/* vertical alignment styles */

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;

<div class="container">

<h2>Demo 1</h2>
<div class="row">
  <div class="row-same-height">
    <div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
    <div class="col-xs-3 col-xs-height col-top">2st column</div>
    <div class="col-xs-3 col-xs-height col-middle">3st column</div>
    <div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
  </div>
</div><!-- ./row -->
</div><!-- ./container -->

Đây là một bản demo của JSFiddle .