Cách đặt vị trí div ở giữa màn hình khi trang lớn hơn màn hình

141

Xin chào, tôi đang sử dụng một cái gì đó tương tự như sau để có vị trí div ở giữa màn hình:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

Tuy nhiên, vấn đề với điều này là nó đặt vật phẩm ở giữa trang chứ không phải màn hình. Vì vậy, nếu trang cao một vài màn hình và tôi ở đầu trang (phần trên cùng của phần được hiển thị trên màn hình) khi tôi làm div xuất hiện thì nó thậm chí không xuất hiện trên màn hình. Bạn phải cuộn xuống để xem nó.

Ai đó có thể vui lòng cho tôi biết làm thế nào bạn làm cho nó xuất hiện ở giữa màn hình không?

css  html  window  center 
— Mã hóa 2
nguồn
Tôi vừa kiểm tra mã chính xác đó trên một trang thử nghiệm và nó đã căn giữa div hoàn hảo trên trang, thậm chí với khoảng 100 <br />trước khi thử và đẩy nó xuống. Có thể thử kiểm tra phần còn lại của mã của bạn để xem liệu bạn có thứ gì đó ghi đè lên các giá trị của DIV hay điều đó đang ảnh hưởng đến DIV của bạn để gây ra những vấn đề này.
— Eli

Câu trả lời:

268

chỉ cần thêm position:fixedvà nó sẽ giữ nó trong tầm nhìn ngay cả khi bạn cuộn xuống. xem nó tại http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
— Hussein
nguồn
1
Bạn là người bảo vệ cuộc sống .. Giải pháp đơn giản hoạt động tốt ngay cả khi phần tử có quy mô biến đổi được áp dụng ..
— Vinnie
91

Tôi nghĩ rằng đây là một giải pháp đơn giản:

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>
Mở rộng đoạn trích

— người dùng2684935
nguồn
7
Cách tiếp cận này tốt hơn nhiều so với câu trả lời được chấp thuận
— Viacheslav Dobromyslov
2
thích cái này, nhưng cái này có hoạt động trong trình duyệt "cũ" không?
— BernaMariano
14

Sử dụng biến đổi;

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Giải pháp Javascript:

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");
— Erdogan
nguồn
5

Chỉ cần đặt margin:auto; 

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>
5

Hãy thử cái này

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
— Chandan Sharma
nguồn
1
Tôi nghĩ rằng cái này hữu ích hơn vì bạn không cần phải áp dụng bất kỳ kiểu nào cho phần tử cha.
— canbax
3 
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Điều này làm việc cho tôi

— Áp-ra-ham
nguồn
2
Mặc dù điều này về mặt kỹ thuật có thể đúng, bạn muốn bao gồm một mô tả ngắn gọn về lý do tại sao điều này giải quyết vấn đề cho bối cảnh
— drneel
2

Câu trả lời ngắn gọn, chỉ cần thêm position:fixedvà điều đó sẽ giải quyết vấn đề của bạn

— Một phần
nguồn
1 
<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>
— Maitrey Malve
nguồn
Câu hỏi đã được hỏi tôi trong cuộc phỏng vấn "làm thế nào bạn căn chỉnh trung tâm div của màn hình?"
— Maitrey Malve
1

Vâng, dưới đây là ví dụ làm việc cho điều này.

Điều này sẽ xử lý vị trí trung tâm nếu bạn thay đổi kích thước trang web hoặc tải ở bất kỳ kích thước nào.

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>
Mở rộng đoạn trích

Trong mẫu tải trên div sẽ luôn ở trung tâm.

Hy vọng điều này sẽ giúp bạn :)

— Vikash Pandey
nguồn
1

Hai cách để định vị thẻ ở giữa màn hình hoặc thẻ cha của nó:

Sử dụng các vị trí:

Đặt thẻ cha positionthành relative(nếu thẻ mục tiêu có thẻ cha) và sau đó đặt kiểu thẻ mục tiêu như sau:

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

Sử dụng flex:

Kiểu thẻ cha sẽ trông như thế này:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}
— Alex Jolig
nguồn
0

Trong trang kịch bản của bạn ...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Sử dụng một lớp trung lưu trong Div ...

   <div class="a-middle">
— Antony Jack
nguồn
-1 

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>
Mở rộng đoạn trích

— Lăng Minh
nguồn
-1

SỬ DỤNG FLEX 

display: flex;
height: 100%;
align-items: center;
justify-content: center;
— NHƯ THERans RAJA M
nguồn
Điều này tập trung nội dung vào phần tử cha hoặc trang, không phải màn hình.
— Sean
-4

Đối với điều này, bạn sẽ phải phát hiện kích thước màn hình. Điều đó là không thể với CSS hoặc HTML; bạn cần JavaScript. Dưới đây là mục nhập Trung tâm nhà phát triển Mozilla trên các thuộc tính cửa sổ https://developer.mozilla.org/en/DOM/window#Properies

Phát hiện chiều cao có sẵn và vị trí phù hợp.

— Scott Radcliff
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.