Làm thế nào để căn giữa một vùng chứa theo chiều dọc trong Bootstrap?

356
user1012181 2014-03-06 01:36.

Tôi đang tìm cách để căn giữa theo chiều dọc containerdiv bên trong jumbotronvà đặt nó ở giữa trang.

Màn hình .jumbotronphải được điều chỉnh cho phù hợp với toàn bộ chiều cao 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 vùng chứa ở giữa theo chiều dọc của 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>

9 answers

630
Hashem Qolami 2014-03-06 01:43.

Cách hộp linh hoạt

Căn chỉnh theo chiều dọc giờ đây rất đơn giản bằng cách sử dụng Bố cục hộp linh hoạt . Ngày nay, phương pháp này được hỗ trợ trên nhiều 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ố bản hack / polyfills hoặc các phương pháp tiếp cận khác nhau cho IE8 / 9.

Trong phần sau, tôi sẽ chỉ cho bạn cách thực hiện đ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 theo chiều dọc. vertical-centerVí dụ, tôi sẽ sử dụng tên lớp.

Ví dụ ở đây (A Mirror 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;
}

Các lưu ý quan trọng (Xem xét 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 flexbox có tiền tố / cũ của nhà cung cấp bị bỏ qua trong đoạn mã đã đăng do ngắn gọn, nhưng tồn tại trong ví dụ trực tuyến.

  3. Trong một số các trình duyệt web cũ như Firefox 9 (trong đó tôi đã thử nghiệm) , container flex - .vertical-centertrong trường hợp này - sẽ không mất không gian có sẵn bên trong phụ huynh, do đó chúng ta cần phải xác định widthtài sản như: width: 100%.

  4. Cũng 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 ở 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.
    Do đó chúng ta cần phải căn chỉnh nó bằng cách box-pack / justify-content.

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


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 tại 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 phải 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 ở giữa bằng cách vertical-align: middlekhai báo. Thông số từ W3C :

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

Trong trường hợp .vertical-centerphần tử cha - phần tử trong trường hợp này - có một heightphần tử con rõ ràng , bất kỳ khi nào chúng ta có thể có một phần tử con có cùng một phần tử heightgốc, chúng tôi sẽ có thể di chuyển đường cơ sở của phần tử gốc đến điểm giữa của đầy đủ - trẻ nhỏ và đáng ngạc nhiên làm cho trẻ trong luồng mong muốn của chúng tôi .container- căn - được căn chỉnh theo chiều dọc.

Quen nhau

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

Sau đó, sử dụng vertical-align: middle;để căn chỉnh các phần tử nội tuyến theo chiều dọc.

Của bạn đây:

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

LÀM VIỆC DEMO .

Ngoài ra, để tránh các sự cố không mong muốn trong các màn hình nhỏ bổ sung, bạn có thể đặt lại chiều cao của phần tử giả thành autohoặc 0hoặc thay đổi displayloại của nó thành nonenếu cần:

@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/ headercác phần xung quanh vùng chứa, tốt hơn nên đặt các phần tử đó một cách chính xác ( relative, absolute? Tù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.

141
Zim 2017-03-08 01:17.

Cập nhật năm 2020

Bootstrap 4 bao gồm flexbox, vì vậy phương pháp căn giữa theo chiều dọc dễ dàng hơn nhiều và không yêu cầu thêm CSS .

Chỉ cần sử dụng các lớp tiện ích d-flexalign-items-center..

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

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

Quan trọng: Căn giữa theo chiều dọc có liên quan đến chiều cao . Vùng chứa chính của các mục bạn đang cố gắng căn giữa phảichiề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 trang 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>

Cũng xem: https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4
52
Rontuku 2014-12-16 22:26.

thêm Bootstrap.css rồi thêm cái này 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>

32
Noname 2018-02-03 01:44.

Trong Bootstrap 4 :

để căn giữa con theo chiều ngang , sử dụng lớp bootstrap-4:

justify-content-center

để căn giữa con 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ì đây là lớp tiện ích bootstrap-4, giống 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 ý: hãy đảm bảo thêm tiện ích bootstrap-4 nếu mã này không hoạt động

Tôi biết đây 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 ích cho ai đó

9
John Slegers 2016-05-20 01:12.

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 !

7
MartinPicker 2017-07-21 05:26.

Đã 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/

0
Ramil Gilfanov 2019-05-30 01:07.

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

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

flex-column cho hướng dọc trên các mục

justify-content-center để căn giữa

style = 'height: 300px;' phải có cho các điểm thiết lập nơi trung tâm được calc hoặc sử dụng lớp h-100

sau đó cho tâm ngang div d-flex justify-content-center và một số vùng chứa

vì vậy chúng ta có phân cấp 3 thẻ: div-column -> 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> 
0
David Martinez Esguerra 2019-08-26 17:46.

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

0
pierre abi chacra 2020-04-16 00:42.

Cung cấp cho lớp vùng chứa

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

Cung cấp cho div bên trong vùng chứa:

align-content: center;

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

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Sau khi Sarah Palin tán thành Donald Trump vào đầu tuần này, gần như không thể tránh khỏi việc Tina Fey sẽ trở lại Saturday Night Live để thăm lại ấn tượng Palin cổ điển của cô. Và Fey chắc chắn đã không làm thất vọng, cô ấy đã đưa ra một lời khen ngợi không hề nhẹ về bài phát biểu chứng thực Iowa quanh co và khó hiểu của Palin trong khi Trump của Darrell Hammond đưa ra bình luận xuyên suốt.

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Brittney Griner (r.) Ngay từ đầu, thân phận của Brittney Griner đã là tình huống con tin Mỹ độc nhất trong lịch sử hiện đại.

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Chúng ta có thể thấy nhiều hơn nữa về một Julio Jones khỏe mạnh trong khu vực cuối năm nay. John Parker Wilson, Greg McElroy, A.

Đó phải là Đức

Đó phải là Đức

Đối với đội tuyển Anh, không có kẻ thủ ác nào lớn hơn Hầu hết các cổ động viên Anh, nếu không muốn nói là tất cả, hẳn sẽ phải gật gù khi tiếng còi mãn cuộc của trận bán kết lượt về W Euro 2022 vang lên. Bởi vì nó báo hiệu rằng Đức sẽ chờ đợi ở Wembley trong trận chung kết với Anh và là điều duy nhất giữa Anh và chiếc cúp lớn đầu tiên của đội tuyển nữ.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language