Cách căn giữa một DIV với kích thước không xác định theo chiều ngang và chiều dọc trên màn hình

Tôi cần căn giữa một DIV ở giữa màn hình, cả theo chiều ngang và chiều dọc, tôi không biết kích thước DIV và div là position:fixed;.Cách căn giữa một DIV với kích thước không xác định theo chiều ngang và chiều dọc trên màn hình

Thủ thuật ký quỹ âm này không hoạt động, vì tôi không biết kích thước div. top:50%; left:50%; magin-top:-100; margin-left:-100;

margin-left: auto; margin-right: auto; không hoạt động vì không hoạt động với position:fixed; và margin-top:auto; margin-bottom:auto; cũng không thẳng đứng giữa;

Tôi thấy rằng phương pháp này: display: table-cell; vertical-align: middle; không hoạt động ether;

Tôi biết cách làm điều này với JavaScript bằng cách sử dụng getComputedStyle để lấy kích thước nội dung div và thực hiện phép toán để sửa vị trí, nhưng tôi muốn một giải pháp CSS thuần túy, vì tôi không muốn kích hoạt JS mỗi lần nội dung div của tôi thay đổi.

Nguồn

2012-05-20 Vitim.us

Và nội dung 'div' của bạn thay đổi như thế nào? Thông qua hoạt ảnh CSS thuần túy hoặc hoạt ảnh JavaScript? – balexandre

@balexandre không có hoạt ảnh, thay đổi nội dung qua Ajax –

Điều gì đó giống như công việc này? Nó cũng sử dụng các display: table-cell nhưng nó đòi hỏi 2 thẻ div để làm việc ... thẻ cha có một phong cách display: table được chỉ định.

NB: Tôi đã thêm z-index:-1; vào lớp trung tâm. Bạn có thể muốn tinh chỉnh điều này dựa trên thiết kế của bạn.

<style> 
.centerbase{ 
    display: table; 
    vertical-align: middle; 
    height:100%; 
    width:100%; 
    text-align:center; 
    position:fixed; 
    z-index:-1; 
} 
.centerpane{ 
    display: table-cell; 
    vertical-align: middle; 
} 
</style> 
<div class="centerbase"> 
    <div class="centerpane"> 
     <img src="https://www.google.com/images/srpr/logo3w.png" /> 
    </div> 
</div>

Nếu bạn cần thêm văn bản không được liên kết trung tâm trong centerpane, bạn có thể thêm div khác bên trong centerpane và xác định kiểu như cái gì đó như: text-align:left; width:400px; margin:0px auto; Bạn sẽ phải xác định chiều rộng cho div bổ sung này .

Nguồn

2012-05-20 06:31:38 signal2013

Nhìn vào số demo (chiều cao không xác định, chiều rộng được đặt).

Bạn có thể sử dụng bảng css (trong ví dụ này html là bảng trong khi nội dung là ô bảng). Đánh dấu:

<body> 

    <div id="container"> 
     <h1>Lorem ipsum</h1> 
     <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
    </div> 

</body>

CSS:

html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
body { 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
    vertical-align: middle; 
} 
#container { 
    width: 400px; 
    margin: 0 auto; 
    background: #ffea00; 
    border: 2px solid #ff9800; 
}

Bạn có cần một workaround cho IE < = 7 (từ IE < = 7 không biết về bảng | table-cell)?

Nguồn

2012-05-20 08:31:57 roger

Tôi chỉ cần hỗ trợ trình duyệt compilant. Thay đổi kiểu html và body không gây rối với nội dung nội dòng khác trên trang, hoặc nó hoạt động với trình bao bọc div? –

Bạn có thể căn giữa theo chiều dọc một ô có chiều cao không xác định với sự trợ giúp của bảng css. Chiều cao của hộp được xác định bởi nội dung của nó. Xem này demo sử dụng vị trí : cố định thuộc tính cho hộp. Chiều rộng của hộp là cũng được đặt là.

Và đây là cách giải quyết cho IE < = 7:

#table { 
    height:100%; 
    text-align:center; 
    white-space: nowrap; 
} 
#container { 
    display: inline; 
    zoom: 1; 
    text-align: left; 
    vertical-align: middle; 
} 
#IEcenter { 
    height: 100%; 
    width: 1px; 
    display: inline; 
    zoom: 1; 
    vertical-align: middle; 
} 
#container * { 
    white-space: normal; 
}

Điều này đáp ứng yêu cầu của bạn?

Nguồn

2012-05-20 17:28:03

Nếu bạn đang làm việc với các vị trí, tính chất biến đổi sẽ hữu ích ở đây.

Bạn chỉ cần thêm các thuộc tính dưới đây để các yếu tố trong đó có để làm trung tâm,

position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%);

Hãy loại bỏ các lề thêm và đệm thêm vào nguyên tố này.

Nguồn

2017-04-19 11:00:23

Cách căn giữa một DIV với kích thước không xác định theo chiều ngang và chiều dọc trên màn hình

Trả lời

Các vấn đề liên quan