Cố gắng căn giữa div theo chiều ngang và chiều dọc trong màn hình

Question

Tôi đang cố tạo div cho trang đích của trung tâm trang web ở chính giữa màn hình, nhưng nó không hoạt động.

Đây là mã của tôi

CSS:

.centerDiv{ 
width:800px; 
margin:0 auto; 
border-radius: 5px; 
background:#111; 
padding:10px;} 

HTML:

<div id="centerDiv" class="centerDiv"> 
    <h1>Title</h1> 
    <p>Text will go here.</p> 
</div> 

Cảm ơn.

Answer 1

Lưu ý: Nếu bạn đang cố gắng tập trung một div ngang và dọc Tôi sẽ đề nghị xem xét vào flexbox. Bạn vẫn sẽ cần phải cung cấp hỗ trợ dự phòng, nhưng flexbox là tương lai và nó thật tuyệt vời.

Cập nhật: flexbox được hỗ trợ bởi tất cả modern browsers ngay bây giờ.

Trước tiên, bạn cần cung cấp cho chiều rộng và chiều cao tĩnh.

Thứ hai, bạn phải thiết lập position: absolute; và left: 50%; top: 50%; sau đó bạn phải làm một margin-left và margin-top có HALF của chiều cao và chiều rộng. Sau đó nó sẽ hiển thị chính xác.

CSS:

.centerDiv{ 
    width: 800px; 
    border-radius: 5px; 
    background: #ccc; 
    padding: 10px; 
    height: 50px; 
    position: absolute; 
    margin-top: -25px; 
    margin-left: -400px; 
    top: 50%; 
    left: 50%; 
} 

http://jsfiddle.net/wJ7dY/

T.B. Tôi đã thay đổi kiểu dáng của bạn một chút để bạn thực sự có thể đọc được văn bản. Hi vọng điêu nay co ich!

Answer 2

Hãy thử như sau:

.centerDiv{ 
    position: absolute; 
    top: 50%; 
    height: 400px; 
    margin-top: -200px; /* Half of the height */ 
    left: 50%; 
    width:800px; 
    margin-left: -400px; /* Half of the width */ 
    border-radius: 5px; 
    background:#111; 
    padding:10px; 
} 

Answer 3

Mã này (demo) cho phép bất kỳ width và height được thiết lập, mà không cần phải cập nhật bất kỳ thuộc tính khác (ví dụ top = height/2) hoặc dựa vào kỹ thuật mà aren' t cũng hỗ trợ (ví dụ display:table; một nhược điểm là hỗ trợ cho các phiên bản IE cũ thiếu Kết hợp điều này với một giải pháp cho IE chỉ có thể là bạn đang đặt cược tốt nhất

CSS:...

.absoluteCenter { 
/* Must manually set width/height */ 
width:800px; 
height:500px; 

/* The magic centering code */ 
margin:auto; 
position:absolute; 
top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */ 
left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only */ 

/* Prevent div from overflowing main window */ 
max-width:100%; 
max-height:100%; 
overflow:auto; 
} 

/* IE 7 and Below */ 
:first-child+html .absoluteCenter, 
* html .absoluteCenter { 
/* Place code here to override all above values, and add IE friendly centering */ 
} 

Và HTML:

<div class="absoluteCenter"> 
Content of DIV 
</div> 

Answer 4

bộ lợi nhuận để tự động thay vì 0 auto và bạn cần một chiều cao. Tôi nghĩ 100% cho mục đích của bạn.

Answer 5

Những gì bạn đang tìm kiếm là display:table và display:table-cell. Tùy chọn này sẽ căn chỉnh phần tử #center thẳng đứng trong phần tử #parent bất kể chiều cao của phần tử #center. Tôi tin rằng bạn yêu cầu chiều cao trên phần tử #parent.

HTML

<div id="parent"> 
<div id="center"> 
    <h1>Title</h1> 
    <p>Text will go here.</p> 
</div> 
</div> 

CSS

#parent{ 
display: table; 
width: /* Your width */; 
height: /* Your height */; 
} 

#center{ 
position: relative; 
display: table-cell; 
width: /* Your width */; 
height: /* Your height */; 
vertical-align: middle; 
margin: 0 auto; 
} 

tôi chỉ sử dụng ngày hôm qua này, sử dụng display:table trên body. Kỹ thuật này phải là compatible through to IE8.