Làm cách nào để căn giữa một div theo chiều dọc cho tất cả các trình duyệt?

1367

Tôi muốn tập trung divtheo chiều dọc với CSS. Tôi không muốn bảng hoặc JavaScript, nhưng chỉ 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 một divchiều dọc trong tất cả các trình duyệt chính, bao gồm cả Internet Explorer 6?

css cross-browser alignment vertical-alignment centering

— Burak Erdem
nguồn

25

@MarcoDemaio Mọi người có thường xuyên nhăn mặt tablesvì bố trí ở đây không?

— Chud37

14

@ Chud37: nó phụ thuộc vào những gì bạn phải làm, các bảng để bố trí thường không linh hoạt và dài để nhập mã, với css, bạn có thể dễ dàng thay đổi bố cục 2 cols thành bố cục 3/4/5, v.v. 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

Trong trường hợp mọi người không quan tâm đến hỗ trợ trình duyệt cũ hơn: davidwalsh.name/css-vertical-center

— Karolis arapnickis

1

css-vertical-center.com có một số giải pháp với thông tin tương thích trình duyệt

— EscapeNetscape 4/2/19

2

Đây là rất nhiều cách để làm điều đó css-tricks.com/centering-css-complete-guide

— Michael Yurin

Câu trả lời:

1374

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

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  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>

Mở rộng đoạn trích

Xem ví dụ hoạt động 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à rất muốn biết liệu có ai thấy bất kỳ vấn đề nào với nó không. Nó cũng hoạt động tốt cho các lớp phủ trung tâm - hộp đèn, cửa sổ bật lên, v.v.

— Billbad
nguồn

Nếu không có DIV bên ngoài "tuyệt đối", bất kỳ nội dung nào trên trang trước khi nó sẽ đẩy toàn bộ khối xuống. Điều này làm cho nó độc lập hơn với nội dung trang khác.

— Billbad

9

.outer {position:absolute;width:100%;height:100%}là không cần thiết, họ ở đây chỉ đơn giản là để chứng minh. Tất cả chúng ta cần là display:table, nếu có ai nhầm lẫn như tôi.

— gfacless

Tôi đã nhận thấy rằng điều này cần 99% để tránh các thanh cuộn. Quan trọng hơn, các công trình này với chỉ hai divs đầu tiên, nói giữ .outervà middlevà rõ ràng bỏ qua .innervà phong cách của mình. Tôi không biết ý nghĩa của nó là gì margin-left, margin-rightđược đặt thành tự động vì điều đó không tập trung vào phần tử theo chiều ngang ?? !!!

— dùng10089632

Loại bỏ width: 100%;và thêm margin: 0 autođể .outercho phép chiều rộng thay đổi là tốt.

— rococo

@ user10089632 Không, không phải vấn đề về chiều rộng hay chiều cao mà là vị trí. top: 0; left 0;bị thiếu, ít nhất là trong Chrome, mặc định là 1.

— Michał Woliński

280

Một cái nữa tôi không thể thấy 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à tối thiểu / tối đa
Trung tâm bất kể phần đệm (không có kích thước hộp!)
heightphải được khai báo (xem Chiều cao thay đổi )
Cài đặt được đề xuất overflow: autođể ngăn chặn sự lan tỏa nội dung (xem Tràn)

_{Nguồn: Định tâm ngang và dọc tuyệt đối trong CSS}

— Yisela
nguồn

7

Đ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 bằng chrome vì một số lý do

— Ryan Knell

1

Cảm ơn bạn. Tôi cần một bản sửa lỗi trong đó tôi không cần tính chiều cao hoặc chiều rộng px và điều này đã hoạt động hoàn hảo.

— GFoley83

8

Giải pháp tuyệt vời, đặc biệt là vì bạn không cần div cha mẹ

— Luca Steeb

1

Điều này sẽ kéo dài nếu chiều cao không cố định, ngoài điều đó: 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ụngmargin: auto;

— Charles L.

253

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

1) vị trí: tương đối;

2) hàng đầu: 50%;

3) biến đổi: dịchY (-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>

Mở rộng đoạn trích

— Sốt
nguồn

4

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

3

Can thiệp vào chỉ số z

— ripper234

4

không hoạt động khi heightbên ngoài divlà 100%. Sau đó chỉ làm việc với position: absolute;.

— Arch Linux tu

1

Tôi đã tìm thấy giải pháp này ở nơi khác trước, nhưng thêm vào câu trả lời cụ thể này để đề cập đến -webkit-transformbiến thể cụ thể, mà tôi cần để làm cho phương pháp này hoạt động trong ph Phantomjs ... đã kết thúc hàng giờ đấu tranh rất cảm ơn bạn!

— drmrbrewer

2

Đây là câu trả lời tốt nhất. Điều này cực kỳ đơn giản, gây rối với số lượng công việc và chức năng hiện có ít nhất trên mọi thứ như IE9 mà không ai còn sử dụng nữa. Hãy để anh chàng này thêm một số upvote!

— Nick Steele

136

Trên thực tế, bạn cần hai div cho định tâm dọc. Cá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>

Mở rộng đoạn trích

Đây là kết quả

— Roxim ovchinnikov
nguồn

4

đó là một mánh khóe cũ ... 50% hàng đầu và lề trên âm một nửa chiều cao cho div bên trong

— Manatax

34

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

116

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%;
    background:green;
}

body, html{
  height:100%;
}

<div class="container">
    <div>Div to be aligned vertically</div>
</div>

Mở rộng đoạn trích

— Santosh Khalse
nguồn

1

Nếu bạn đã có một navbar, bạn có thể điều 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 navbarlà gì.

— Adrian

tôi cũng đã phải loại bỏ lề / đệm khỏi cơ thể

— Ben

Hoạt động tốt với float. Cảm ơn.

— Amir A. Shabani

Xin lưu ý rằng điều này sẽ có khả năng hành xử kỳ lạ trên các trình duyệt safari di động "mới hơn cũ". Việc sử dụng được đề xuất thay vì chiều cao là cơ sở linh hoạt trên lớp

— .container

78

Chỉnh sửa 2020: chỉ sử dụng điều này nếu bạn cần hỗ trợ các trình duyệt cũ như IE8 (mà bạn nên từ chối làm 😉). Nếu không, sử dụng flexbox.

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

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

html, body{
  height: 100%;
  margin: 0;
}
.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>

Mở rộng đoạn trích

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

— Armel Larcier
nguồn

Từ chối hỗ trợ cho các trình duyệt cũ, giải pháp cho tôi không phải là flexbox mà là hệ thống lưới. Có một chút khó chịu đối với tôi nội dung trung tâm trong một thùng chứa, khi nó có chiều cao quá nhỏ, cần hiển thị thanh cuộn và nội dung chính giữa đã mất khu vực cuộn với tất cả các phương thức khác. Trong container tôi chỉ sử dụng: {display: Grid; align-item: trung tâm; } Hy vọng điều này sẽ giúp được ai đó.

— tomasofen

63

Sau rất nhiều nghiên cứu cuối cùng tôi cũng tìm được giải pháp tối ưu. Nó hoạt động ngay cả đối với các yếu tố nổi. Xem nguồn

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

— ymakux
nguồn

4

Điều này thực sự hoạt động tốt, miễn là bạn nhớ rằng phần tử container phải có chiều cao ngầm hoặc rõ ràng; jsfiddle.net/14kt53un Một chú chó nhỏ cho những người tương đối mới với CSS.

— Martyn Shutt

6

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 người khác nhìn thấy câu trả lời của bạn quá! Cảm ơn bạn! Nhân tiện, 50%làm việc cho tôi (không phải -50%)

— The Codee

Điều đó thật phi thường. Sau nhiều giờ tìm kiếm, cái này làm việc cho tôi. Tôi đã phải sử dụng translY (50%) Tôi chắc chắn tại sao, nhưng nó đã hoạt động. Trong trường hợp của tôi, cha mẹ được tạo bởi AEM Forms Engine và tôi chỉ có thể kiểm soát các phần tử con nhất định.

— tarekahf

41

Giải pháp Flexbox

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

Mở rộng đoạn trích

— Reggie Pinkham
nguồn

3

Lưu ý justify-content: centercũng sẽ tập trung vào các mục theo chiều ngang

— Peter Berg

36

Để căn giữa div trên một trang, hãy 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ở rộng đoạn trích

Một tùy 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ở rộng đoạn trích

Một tùy chọn khác là sử dụng biế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>

Mở rộng đoạn trích

— Nerdroid
nguồn

3

@ArmelLarcier Điều đó không chính xác. Đơn vị tương đối là tỷ lệ phần trăm %, ems và rems. Giá trị tuyệt đối hoặc cố định là pixel hoặc điểm. Điều bạn đang đề cập đến là "nó chỉ hoạt động với chiều cao được khai báo". Howevever, mặc dù phương pháp này được mô tả bởi Moes không yêu cầu chiều cao, nhưng 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 bên 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 khác là phương pháp 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

@ricardozea Tôi không có ý chơi bướng bỉnh nhưng nói div trung tâm sẽ mở rộng theo chiều dọc trong khi còn lại theo chiều dọc là sai. Thử nó. Tôi biết khi tôi nói chiều cao phải là "cố định", đó không phải là từ đúng. Nó thực sự là tương đối, với cha mẹ của nó. Dù sao, tôi nghĩ rằng phương pháp của Chris Coy có ý nghĩa hơn, hãy xem câu trả lời của tôi stackoverflow.com/a/21919578/1491212 Nó tương thích với IE8 VÀ không hoạt động trên một phần tử không có kích thước được chỉ định.

— Armel Larcier

1

@ArmelLarcier Tất cả đều tốt. Không sai anh ạ. Hãy thử: 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 ứng, nhưng tất cả đều 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ài lòng, nó sử dụng đánh dấu thêm và CSS quá dài dòng. 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ỉ cần để nó trên cùng / trung tâm thẳng hàng và tiếp tục.

— Ricardo Zea

1

@ricardozea Vâng, codepen mà bạn đã liên kết sử dụng phương thức "display: table" và đánh dấu thêm nên tôi không ngạc nhiên. Dù sao, +1 cho câu cuối cùng của bạn.

— Armel Larcier

23

Giải pháp đơn giản nhất là dưới đây:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

Mở rộng đoạn trích

— Varsha Dhadge
nguồn

2

Quả thực là dễ nhất :) Mặc dù vậy, tôi phải đặt các kiểu thành div ngoài, thay vì cơ thể.

— baburao

21

Thật không may - nhưng không đáng ngạc nhiên - giải pháp phức tạp hơn người ta mong muốn. Thật không may, bạn sẽ cần sử dụng các div bổ sung xung quanh div mà bạn muốn tập trung theo chiều dọc.

Đối với các trình duyệt tuân thủ tiêu chuẩn như Mozilla, Opera, Safari, v.v., bạn cần đặt div bên ngoài được hiển thị dưới dạng bảng và div bên trong được hiển thị dưới dạng ô bảng - sau đó có thể được căn giữa theo chiều dọc. Đối với Internet Explorer, bạn cần định vị div bên trong hoàn toàn trong div bên ngoài và sau đó chỉ định đỉnh là 50% . Các trang sau giải thích kỹ thuật này và cung cấp một số mẫu mã:

Định tâm dọc trong CSS
~~Định tâm dọc trong CSS với Chiều cao không xác định (tương thích Internet Explorer 7)~~ (không còn tồn tại)
Định tâm dọc trong CSS với Chiều cao không xác định (tương thích Internet Explorer 7) (Lưu trữ bài viết được cung cấp bởi Wayback Machine)

Ngoài ra còn có một kỹ thuật để thực hiện định tâm dọc bằng JavaScript. Căn chỉnh nội dung theo chiều dọc với JavaScript & CSS chứng minh điều đó.

— SIDS
nguồn

20

Nếu ai đó chỉ quan tâm đến Internet Explorer 10 (và phiên bản mới hơn), hãy sử dụng flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}

<div class="parent">
    <div class="centered"></div>
</div>

Mở rộng đoạn trích

Hỗ trợ Flexbox: http://caniuse.com/flexbox

— dũng cảm
nguồn

Android <4.4 không hỗ trợ align-items: center;!

— André Fiedler

Trên thực tế, nó không hỗ trợ các mục align: centre; caniuse.com/#search=align-items

— t.mikael.d

@ t.mikael.d Bạn có thể muốn xem xét kỹ hơn về bảng đó. Đối với Android <4.4, có thông báo "Chỉ hỗ trợ thông số kỹ thuật flexbox cũ và không hỗ trợ gói."

— Nathan Osman

15

Một cách hiện đại để tập trung một yếu tố theo chiều dọc sẽ được sử dụng flexbox.

Bạn cần một phụ huynh để quyết định chiều cao và một đứa trẻ làm trung tâm.

Ví dụ dưới đây sẽ căn giữa một div đến trung tâm trong trình duyệt của bạn. Điều quan trọng (trong ví dụ của tôi) là để thiết lập height: 100%để bodyvà htmlvà sau đó min-height: 100%để đựng của bạn.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}

<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

Mở rộng đoạn trích

— Marwelln
nguồn

14

Chỉ định tâm theo chiều dọc

Nếu bạn không quan tâm đến Internet Explorer 6 và 7, bạn có thể sử dụng một kỹ thuật liên quan đến hai container.

Các thùng chứa bên ngoài:

nên có display: table;

Các thùng chứa bên trong:

nên có display: table-cell;
nên có vertical-align: middle;

Hộp nội dung:

nên có display: inline-block;

Bạn có thể thêm bất kỳ nội dung nào bạn muốn vào hộp nội dung mà không cần quan tâm đến chiều rộng hoặc chiều cao của nó!

Bản giới thiệu:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

Mở rộng đoạn trích

Xem thêm Fiddle này !

Định tâm theo chiều ngang và chiều dọc

Nếu bạn muốn tập trung cả theo chiều ngang và chiều dọc, bạn cũng cần những điều sau đây.

Các thùng chứa bên trong:

nên có text-align: center;

Hộp nội dung:

nên điều chỉnh lại căn chỉnh văn bản ngang thành ví dụ text-align: left;hoặc text-align: right;, trừ khi bạn muốn văn bản được căn giữa

Bản giới thiệu:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

Mở rộng đoạn trích

Xem thêm Fiddle này !

— John Slegers
nguồn

13

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}

<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

Mở rộng đoạn trích

Liên quan: Trung tâm một hình ảnh

— linh dương
nguồn

10

Đây luôn là nơi tôi đến khi tôi phải quay lại vấn đề này .

Đối với những người không muốn thực hiện bước nhảy:

Chỉ định bộ chứa cha là position:relativehoặc position:absolute.
Chỉ định một chiều cao cố định trên container con.
Đặt position:absolutevà top:50%trên thùng chứa con để di chuyển từ trên xuống giữa của cha mẹ.
Đặt lề trên cùng: -yy trong đó yy bằng một nửa chiều cao của thùng chứa con để bù vật phẩm lên.

Một ví dụ về điều này trong mã:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

— Ninx
nguồn

9

Sử dụng thuộc tính flex của CSS.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

Mở rộng đoạn trích

hoặc bằng cách sử dụng display: flex;vàmargin: auto;

Hiển thị đoạn mã

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}

<div class="parent">
    <div class="child"></div>
</div>

Mở rộng đoạn trích

hiển thị trung tâm văn bản

Hiển thị đoạn mã

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}

<div class="parent">Center</div>

Mở rộng đoạn trích

Sử dụng tỷ lệ phần trăm (%) chiều cao và chiều rộng.

Hiển thị đoạn mã

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

Mở rộng đoạn trích

— Deepu Reghunath
nguồn

8

Tôi vừa viết CSS này và để biết thêm, xin vui lòng đi qua: Bài viết này với sự sắp xếp theo chiều dọc bất cứ thứ gì chỉ với 3 dòng CSS .

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

— Sanjib Debnath
nguồn

1

Các biến đổi CSS có thể gây biến dạng trong văn bản và đường viền (khi toán học dẫn đến các pixel phân đoạn).

— Nathan K

5

Lưới CSS

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

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

Mở rộng đoạn trích

— Andy Hoffman
nguồn

5

Đối với những người mới đến hãy thử

display: flex;
align-items: center;
justify-content: center;

— Người tôi
nguồn

1

Vui lòng thêm một Đoạn mã cho thấy cách mã CSS này sắp xếp theo chiều dọc a div.

— Khỉ Heretic

cái này cũng hoạt động <div style="display:flex"><div style="margin:auto">Inner</div></div>

— idrisadetunmbi

Tôi đã đi qua với lời giải thích tuyệt vời này của các mục căn chỉnh và nội dung biện minh. Phải đọc: stackoverflow.com/questions/42613359/

— Kẻ

4

Câu trả lời từ Billbad chỉ hoạt động với chiều rộng cố định của .innerdiv. Giải pháp này hoạt động cho chiều rộng động bằng cách thêm thuộc tính text-align: centervào .outerdiv.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

Mở rộng đoạn trích

— Ruwen
nguồn

Hấp dẫn! Tôi đang sử dụng một kỹ thuật gần như giống hệt nhau! -> stackoverflow.com/questions/396145/ Mạnh

— John Slegers

4

Ba dòng mã sử dụng transformhoạt động thực tế trên các trình duyệt hiện đại và Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

Tôi đang thêm câu trả lời này vì tôi thấy một số điểm không hoàn chỉnh trong phiên bản trước của câu trả lời này (và Stack Overflow sẽ không cho phép tôi bình luận đơn giản).

'vị trí' tương đối làm rối kiểu dáng nếu div hiện tại nằm trong thân máy và không có div container. Tuy nhiên, 'đã sửa' có vẻ hoạt động nhưng rõ ràng nó đã sửa nội dung ở giữa chế độ xem
Ngoài ra, tôi đã sử dụng kiểu dáng này để căn giữa một số div lớp phủ và thấy rằng trong Mozilla, tất cả các yếu tố bên trong div biến đổi này đã bị mất viền dưới cùng. Có thể là một vấn đề kết xuất. Nhưng chỉ thêm phần đệm tối thiểu vào một số trong số chúng sẽ khiến nó chính xác. Chrome và Internet Explorer (đáng ngạc nhiên) đã hiển thị các hộp mà không cần đệm

— MandarK
nguồn

3

Liên kết sau đây trình bày một cách đơn giản để thực hiện chỉ với 3 dòng trong CSS của bạn:

Căn dọc mọi thứ chỉ với 3 dòng CSS .

Tín dụng cho : Sebastian Ekstrom .

Tôi biết câu hỏi đã có câu trả lời tuy nhiên tôi thấy tiện ích trong liên kết vì sự đơn giản của nó.

— Hicaro
nguồn

3

Không trả lời cho khả năng tương thích trình duyệt nhưng cũng đề cập đến Grid mới và tính năng Flexbox không quá mới.

Lưới

Từ: Mozilla - Tài liệu lưới - Align Div theo chiều dọc

Hỗ trợ trình duyệt: Hỗ trợ trình duyệt lưới

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Hộp linh hoạt

Hỗ trợ trình duyệt: Hỗ trợ trình duyệt Flexbox

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

— ctekk
nguồn

3

Tôi nghĩ rằng một giải pháp vững chắc cho tất cả các trình duyệt mà không cần sử dụng flexbox - "align-items: centre;" là sự kết hợp của màn hình: bảng và dọc-align: middle;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣Demo: https://jsfiddle.net/6m640rpp/

— Martin Wantke
nguồn

2

Tôi đã làm điều đó với điều này (thay đổi chiều rộng, chiều cao, lề trên và lề trái tương ứng):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

— Netuddki
nguồn

Điều đó chỉ tốt nếu bạn biết chiều rộng / chiều cao của DIV mà bạn đang cố gắng tập trung. Đây không phải là những gì câu hỏi đang hỏi

— egr103

2

Các nội dung có thể dễ dàng tập trung bằng cách sử dụng flexbox. Đoạn mã sau hiển thị CSS cho vùng chứa bên trong mà nội dung cần được căn giữa:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

— Mahendra Liya
nguồn

2

Đặc biệt đối với các div cha mẹ có chiều cao tương đối (chưa biết), việc định tâm trong giải pháp chưa biết có tác dụng rất lớn đối với tôi. Có một số ví dụ mã thực sự tốt đẹp trong bài viết.

Nó đã được thử nghiệm trong Chrome, Firefox, Opera và Internet Explorer.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

Mở rộng đoạn trích

— Ruwen
nguồn

2

Chỉ cần làm điều đó: Thêm lớp tại của bạn div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

Và đọc bài viết này để được giải thích. Lưu ý: Heightlà cần thiết.

— Anshul
nguồn

2

Có một mẹo tôi phát hiện ra gần đây: Bạn cần sử dụng top 50%và sau đó bạn thực hiệntranslateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

Mở rộng đoạn trích

— Melchia
nguồn

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.

Licensed under cc by-sa 3.0 with attribution required.