Câu hỏi Làm thế nào để theo chiều dọc trung tâm một div cho tất cả các trình duyệt?


Tôi muốn tập trung div theo chiều dọc với CSS. Tôi không muốn các bảng hoặc JavaScript, nhưng chỉ có CSS ​​thuần túy. Tôi đã tìm thấy một số giải pháp, nhưng tất cả chúng đều thiếu hỗ trợ Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

Làm cách nào tôi có thể căn giữa div theo chiều dọc trong tất cả các trình duyệt chính, bao gồm Internet Explorer 6?


1101
2017-12-28 12:57


gốc


có thể trùng lặp Làm thế nào để chiều dọc nội dung trung tâm với chiều cao thay đổi trong một div? - ripper234
@MarcoDemaio Không phải mọi người liên tục cau mày tables cho bố cục ở đây? - Chud37
@ Chud37: nó phụ thuộc vào những gì bạn phải làm, bảng cho bố cục nói chung không linh hoạt và dài để gõ mã, với css bạn có thể dễ dàng thay đổi bố cục 2 cols thành bố cục sols 3/4/5 vv Nhưng trong trường hợp này là khác nhau, sử dụng hàng tá mẹo và thủ thuật css cho một nhiệm vụ đơn giản như vậy có thể được thực hiện với một bảng trình duyệt chéo hoàn hảo, nó giống như cố gắng vào nhà bạn qua cửa sổ thay vì sử dụng cửa. - Marco Demaio
Câu trả lời TỐT NHẤT cho câu hỏi này có thể được tìm thấy tại stackoverflow.com/a/13075912/5651 - jessegavin
Chỉ cần nhìn thấy câu trả lời này sắp xếp thẳng đứng một div trong div khác. Phân chia theo chiều dọc Divs - Lalit Kumar


Các câu trả lời:


Dưới đây là giải pháp toàn diện tốt nhất mà tôi có thể xây dựng theo chiều dọc và chiều ngang theo chiều rộng cố định, chiều cao linh hoạt hộp nội dung. Nó đã được thử nghiệm và làm việc cho các phiên bản gần đây của Firefox, Opera, Chrome và Safari.

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

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Xem ví dụ làm việc với nội dung động

Tôi đã xây dựng một số nội dung động để kiểm tra tính linh hoạt và muốn biết liệu có ai gặp bất kỳ vấn đề nào với nó hay không. Nó cũng hoạt động tốt cho các lớp phủ ở giữa - hộp đèn, cửa sổ bật lên, v.v.


1134
2018-05-31 03:13



Làm việc hoàn hảo khi div bên trong là một chiều cao linh hoạt. Tôi đã thử nghiệm nó trong Chrome và IE7 mà không có div bên ngoài vị trí hoàn toàn và làm việc như là tốt. - Sabrina Leggett
Đây có vẻ là giải pháp duy nhất không yêu cầu bất kỳ chiều cao mã hóa cứng nào. - Martijn
width: /*whatever width you want*/;, mọi thứ nhưng nằm ngang. : s - Bentley4
jsfiddle.net/44oa3Ls6 - Hermann Ingjaldsson
Ai có thể nghĩ gần như vào năm 2017 rằng các bảng là giải pháp tốt nhất để tập trung một phần tử với kích thước không xác định. Và bạn không cần phải lo lắng về việc khét tiếng lỗi biên giới mờ trong Chrome. Cảm ơn bạn! - Saul Fautley


Tôi không thể thấy thêm trong danh sách:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • Trình duyệt chéo (bao gồm Internet Explorer 8 - Internet Explorer 10 không có hack!)
  • Đáp ứng với tỷ lệ phần trăm và min- / max-
  • Căn giữa bất kể đệm (không có kích thước hộp)
  • height phải được khai báo (xem Chiều cao thay đổi)
  • Cài đặt được đề xuất overflow: auto để ngăn chặn tràn nội dung (xem phần Tràn)

Nguồn: Trung tâm ngang và dọc tuyệt đối trong CSS


245
2017-08-13 03:08



Điều này làm việc cho tôi, nhưng tôi cần phải có chiều rộng và chiều cao cố định trong chrome vì một số lý do - Ryan Knell
Cảm ơn bạn. Tôi cần một sửa chữa mà tôi không cần phải tính toán chiều cao hoặc chiều rộng px và điều này làm việc hoàn hảo. - GFoley83
Giải pháp tuyệt vời, đặc biệt là vì bạn không cần div cha mẹ - Luca Steeb
Điều này không kéo dài nếu chiều cao không cố định, khác hơn là: giải pháp tốt đẹp - Bart Burg
Nếu bạn có chiều rộng và chiều cao không phải là 100%, hãy sử dụng margin: auto; - Charles L.


Cách đơn giản nhất sẽ là như sau 3 dòng CSS:

position: relative;
top: 50%;
transform: translateY(-50%);

Sau đây là một ví dụ:

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>


164
2017-12-17 18:30



lưu ý: không hoạt động chính xác nếu chiều cao của div ngoài được đặt bằng "min-height: 170px" - Bart Burg
Can thiệp với chỉ mục z - ripper234
Không hoạt động nếu nội dung có float. - kolobok
không hoạt động khi height của bên ngoài div Là 100%. Sau đó, chỉ hoạt động với position: absolute;. - Arch Linux Tux


Trên thực tế bạn cần hai div cho trung tâm dọc. Div chứa nội dung phải có chiều rộng và chiều cao.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Đây là kết quả


126
2017-12-28 15:15



Cảm ơn!!! Đã làm cho tôi. Bạn có nhớ giải thích một chút về cách bạn nghĩ ra nó không? - Dao Lam
đó là một thủ thuật cũ ... top 50% và lợi nhuận hàng đầu tiêu cực một nửa chiều cao cho div bên trong - Manatax
nó giả sử bạn có chiều cao cố định cho div. không hoạt động khi div có thể thay đổi chiều cao. - Andre Figueiredo
tôi đã biên soạn một danh sách tất cả các cách hữu ích ..jsfiddle.net/k6ShD/4 - Muhammad Umer


Đây là phương pháp đơn giản nhất tôi tìm thấy và tôi sử dụng nó mọi lúc (jsFiddle demo tại đây)

Cảm ơn Chris Coyier từ CSS Tricks for bài viết này.

.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Hỗ trợ bắt đầu với IE8.


73
2018-02-20 21:05



Nếu tất cả các giải pháp khác không thành công - điều này sẽ vẫn hoạt động. Tôi thích nó. +1 vì đã đề cập đến Chris Coyier và đăng bài này ở đây! - Daniel Ziegler


Sau rất nhiều nghiên cứu cuối cùng tôi đã tìm ra giải pháp tối thượng. Nó hoạt động ngay cả đối với các phần tử lưu hành. Xem nguồn 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

49
2018-05-19 12:04



Điều này hoạt động thực sự tốt, miễn là bạn nhớ rằng phần tử vùng chứa phải có chiều cao tiềm ẩn hoặc rõ ràng; jsfiddle.net/14kt53un  Một dấu hiệu nhỏ cho những người tương đối mới với CSS. - Martyn Shutt
Trong số tất cả các câu trả lời, đây là cách đơn giản nhất! Tôi hy vọng những người khác cũng thấy câu trả lời của bạn! Cảm ơn bạn! Nhân tiện, 50% làm việc cho tôi (không -50%) - The Codesee
điều này chỉ làm việc với position:absolute cho tôi. - Panama Jack


Để căn giữa div trên một trang, kiểm tra liên kết fiddle.

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

Một lựa chọn khác là sử dụng hộp flex, kiểm tra liên kết fiddle.

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Một tùy chọn khác là sử dụng chuyển đổi CSS 3:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>


31
2017-08-13 04:06



Chỉ hoạt động với độ cao cố định ... - Armel Larcier
@ArmelLarcier, không, nó công trinh với chiều cao tương đối cũng vậy. - user
50% chiều cao là cố định. Nó không liên quan đến nội dung, nhưng phụ huynh. - Armel Larcier
@ArmelLarcier Đó là không chính xác. Đơn vị tương đối là phần trăm %, emcát remS. Giá trị tuyệt đối hoặc cố định là pixel hoặc điểm. Những gì bạn đang đề cập đến là "nó chỉ hoạt động với chiều cao được khai báo". Tuy nhiên, mặc dù phương pháp này được mô tả bởi Moes đòi hỏi chiều cao, khi bạn khai báo nó theo đơn vị tương đối, tỷ lệ phần trăm là tốt nhất, cho dù có bao nhiêu nội dung nằm trong DIV trung tâm mà DIV sẽ mở rộng theo chiều dọc để phù hợp với nội dung của nó. Đó là vẻ đẹp của phương pháp này. Một điều tốt nữa là phương thức này hoạt động trong IE8 / 9/10 trong trường hợp ai đó vẫn cần hỗ trợ các trình duyệt đó. - Ricardo Zea
@ArmelLarcier Đó là tất cả tốt. Không phải là anh trai sai. Thử nó: codepen.io/shshaw/pen/gEiDt - Thêm đoạn văn vào hộp màu xanh lá cây;]. Cấp, nó sử dụng Modernizr để thực hiện hiệu quả, nhưng tất cả trong tất cả nó có thể làm được. Tôi đã thấy câu trả lời của bạn và bài đăng CSS-Tricks.com, nhưng phương pháp đó không làm tôi hạnh phúc, nó sử dụng đánh dấu thêm và CSS quá dài. Tôi nghĩ giải pháp tốt nhất là sử dụng flexbox hoặc transform: translate(-50%, -50%); kỹ thuật. Đối với IE8, tôi chỉ để nó ở trên cùng / căn giữa và di chuyển trên. - Ricardo Zea


Bây giờ giải pháp flexbox là một cách rất dễ dàng cho các trình duyệt hiện đại, vì vậy tôi khuyên bạn nên làm điều này cho bạn:

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

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>


31
2017-12-15 13:08



Điều này sẽ cao hơn nhiều trong danh sách - Peter Berg
làm việc cho tôi mà không có chiều cao: 100%; cảm ơn - Sameera R.
Nếu bạn có một navbar, bạn có thể tinh chỉnh chiều cao bằng cách sử dụng height: calc(100% - 55px) hoặc bất kể chiều cao của bạn navbar Là. - Adrian
Rất hữu ích, cảm ơn. - slorenzo
tôi cũng phải loại bỏ lề / đệm ra khỏi cơ thể - Ben


Giải pháp Flexbox

Ghi chú
1. Phần tử cha được đặt tên lớp.
2. Thêm tiền tố của nhà cung cấp flex nếu bạn yêu cầu trình duyệt được hỗ trợ.

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>


24
2018-03-30 01:30



chú thích justify-content: center sẽ căn giữa các mặt hàng theo chiều ngang - Peter Berg