Phần tử định vị <div> ở giữa màn hình

134

Tôi muốn đặt một phần tử <div>(hoặc a <table>) ở giữa màn hình bất kể kích thước màn hình. Nói cách khác, không gian bên trái trên 'trên cùng' và 'dưới cùng' phải bằng nhau và không gian bên trái 'bên phải' và 'bên trái' phải bằng nhau. Tôi muốn thực hiện điều này chỉ với CSS.

Tôi đã thử những điều sau đây nhưng nó không hoạt động:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Lưu ý:
Sẽ tốt hơn nếu <div>phần tử (hoặc <table>) cuộn với trang web hoặc không. Chỉ muốn nó được tập trung khi trang tải.

javascript  css  html 
— sumit
nguồn
1
bản sao có thể có của Cách căn chỉnh <div> vào giữa trang
— Purag
Xin chào Purmou, câu hỏi bạn đã đề cập nếu định vị ở giữa trang, tức là bên trái và bên phải không gian bằng nhau - không phải không gian trên cùng và dưới cùng bằng nhau!
— sumit
1
— outis
— bjb568

Câu trả lời:

201

Cách dễ dàng, nếu bạn có chiều rộng và chiều cao cố định:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}​

Vui lòng không sử dụng kiểu nội tuyến! Dưới đây là một ví dụ hoạt động http://jsfiddle.net/S5bKq/ .

— einstein
nguồn
13
Đối với những người tìm kiếm chiều cao động: stackoverflow.com/questions/396145/ từ
— pulkitsinghal
1
@ woho87 tại sao không sử dụng kiểu nội tuyến? vì những lý do nổi tiếng hoặc có một cái gì đó nhiều hơn mà tôi nên biết cho ví dụ cụ thể?
— Sharky
@KatrinRaimond vì những lý do nổi tiếng, được ghi lại ở đây stackoverflow.com/questions/2612483/ và ở đây webdesign.about.com/od/css/a/aa073106.htm .
— Alex
Nhưng, việc đặt đơn vị hàng đầu của divEuity theo đơn vị '%' sẽ khiến cho divEuity chiếm không gian theo chiều dọc trừ khi divEuity được đặt bên trong một phần tử tương đối.
— sudip
là vị trí: cố định hay vị trí: tuyệt đối?
— Kurkula
151

Với các biến đổi được hỗ trợ phổ biến hơn trong những ngày này, bạn có thể thực hiện việc này mà không cần biết chiều rộng / chiều cao của cửa sổ bật lên

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Dễ dàng! JSFiddle tại đây: http://jsfiddle.net/LgSZV/

Cập nhật: Kiểm tra https://css-tricks.com/centering-css-complete-guide/ để biết hướng dẫn khá đầy đủ về định tâm CSS. Thêm nó vào câu trả lời này vì nó dường như nhận được rất nhiều nhãn cầu.

— XwipeoutX
nguồn
1
Nếu nội dung trong cửa sổ bật lên đang sử dụng overflow:auto, cuộn sẽ bị vặn trong IE9. :(
— joescii
2
Không phải như vậy. IE8 vẫn chiếm 20% chia sẻ trình duyệt và không hỗ trợ nó . Vì vậy, chỉ lấy cái này cho IE9 +.
— fotanus
7
+1 là giải pháp duy nhất mà bạn không phải chỉ định chiều cao và chiều rộng hoặc sử dụng Javascript.
— Jan Derk
@fotanus khi các nhà phát triển ngừng hỗ trợ IE 9 <người dùng sẽ di chuyển hoặc cập nhật trình duyệt của họ.
— Diego Vieira
@DIegoVieira thật không may, không phải mọi thứ hoạt động như thế nào. Xem bi kịch của chung . Vì vậy, mọi người sẽ tiếp tục hỗ trợ IE8 vì không muốn mất chia sẻ này và mọi người sẽ tiếp tục sử dụng vì nó hoạt động.
— fotanus
33

Đặt chiều rộng và chiều cao và bạn tốt.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Nếu bạn muốn kích thước phần tử linh hoạt (và không quan tâm đến các trình duyệt cũ), hãy đi với câu trả lời của XwipeoutX .

— Erik Aigner
nguồn
1
Đây là câu trả lời sạch nhất và đơn giản nhất và cũng thân thiện với thiết bị di động . +1
— Rust
22

Nó sẽ làm việc cho bất kỳ đối tượng. Ngay cả khi bạn không biết kích thước:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
— dạ quang
nguồn
17

Giờ đây, dễ dàng hơn với HTML 5 và CSS 3:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>
— Daniel De León
nguồn
12

Nếu bạn có một divvị trí tuyệt đối cố định, nó ở vị trí 50% từ đỉnh và 50% bên trái và lề trên và bên trái của một nửa chiều cao và chiều rộng tương ứng. Điều chỉnh theo nhu cầu của bạn:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}
— elclanrs
nguồn
9

Sử dụng flex . Đơn giản hơn nhiều và sẽ hoạt động bất kể divkích thước của bạn :

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>
Mở rộng đoạn trích

— Caner
nguồn
3

Tôi sẽ làm điều này trong CSS:

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

sau đó trong HTML:

<div class="centered"></div>
— Giáo sư
nguồn
0

thử cái này

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

Hoặc cái này

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>
— Đại Lý
nguồn
0

Nếu có ai đang tìm giải pháp,

Tôi đã tìm thấy cái này,

Đó là giải pháp tốt nhất mà tôi tìm thấy!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

Hy vọng bạn thích!

— Christopher Atwood
nguồn
0

Một cách tiếp cận linh hoạt dễ dàng khác để hiển thị khối ở trung tâm: sử dụng căn chỉnh văn bản gốc với line-heightvà text-align.

Giải pháp:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

Và mẫu html:

<div class="parent">
  <div class="child">My center block</div>
</div>

Chúng tôi làm cho div.parenttoàn màn hình, và đứa con duy nhất của anh ấy div.childcăn chỉnh như văn bản với display: inline-block.

Ưu điểm:

  • linh hoạt, không có giá trị tuyệt đối
  • hỗ trợ thay đổi kích thước
  • hoạt động tốt trên điện thoại di động

Ví dụ đơn giản trên JSFiddle: https://jsfiddle.net/k9u6ma8g

— Pavel Shorokhov
nguồn
0

Giải pháp thay thế không sử dụng vị trí tuyệt đối:
Tôi thấy rất nhiều câu trả lời tuyệt đối về vị trí. Tôi không thể sử dụng vị trí tuyệt đối mà không phá vỡ một cái gì đó khác. Vì vậy, đối với những người không thể, đây là những gì tôi đã làm:
https://stackoverflow.com/a/58622840/6546317 (được đăng để trả lời câu hỏi khác).

Giải pháp chỉ tập trung vào định tâm theo chiều dọc vì các phần tử con của tôi đã được căn giữa theo chiều ngang nhưng có thể được áp dụng tương tự nếu bạn không thể căn giữa chúng theo chiều ngang.

— reddtoric
nguồn
-2

thử cái này:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;
— người dùng3423956
nguồn
2
Đây thực sự giống như câu trả lời được chấp nhận
— apaul
vâng, nhưng ở đây tôi giải thích hoạt động của lề trên và còn lại ... ai đó không biết điều này ....
— user3423956
1
Sau đó, nó thực sự giống như câu trả lời thứ hai
— apaul
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.