Tôi đang tập trung canvas của tôi sử dụng mã này:Canvas bao gồm trang trong Internet Explorer
position:absolute;
top:50%;
left:50%;
margin-top:-200px; /* Half of canvas height */
margin-left:-275px; /* Half of canvas width */
Nó hoạt động hoàn hảo trong tất cả các trình duyệt trừ IE9 và 10. Trong Internet Explorer, nó bao gồm toàn bộ trang. Có thể hỗ trợ định tâm canvas trong IE không?
Định tâm sử dụng margin: 0 auto; với display: block; hoạt động trong hầu hết tất cả trình duyệt - những trình duyệt hỗ trợ <canvas> để chắc chắn.
Sống dụ: http://jsbin.com/ovoziv/2
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Centring Canvas</title>
</head>
<body>
<canvas></canvas>
</body>
</html>
CSS
canvas {
display: block;
background: #FFFFB7;
width: 550px;
height: 400px;
margin: 0 auto;
}
EDIT: Cập nhật câu trả lời cho trung tâm theo chiều dọc quá. CSS này sẽ thực hiện thủ thuật:
canvas {
background-color: #FFFFB7;
width: 550px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -275px;
margin-top: -200px;
}
Bây giờ giải thích. Trước tiên, chúng tôi đặt canvas có độ lệch 50% từ trên cùng và bên trái bằng cách sử dụng position: absolute bằng cách đặt top và left thành 50%. Sau đó, vì canvas của bạn có kích thước tĩnh, chúng tôi thêm một lề âm (mà bạn không bao giờ nên làm khi phần tử không được định vị tuyệt đối) cho một nửa chiều rộng và kích thước (550x400/2 = 275x200): margin-left: -275px; margin-top: -200px;.
Canvas bây giờ sẽ được hiển thị ở giữa màn hình. Nếu bạn làm điều này bên trong một phần tử khác và muốn căn giữa trong phần tử đó, hãy thử thêm position: relative; vào phần tử đó, vì vậy nó sẽ sử dụng phần tử của nó thay cho phần tử của cơ thể.
Ví dụ trực tiếp tại đây: http://jsbin.com/ovoziv/6
Nhưng nó không nằm ở giữa, chỉ nằm ngang. – user1431627
@ user1431627 Tôi đã cập nhật câu trả lời của mình. Đó là cơ bản mã của bạn, nhưng dường như làm việc anyway .. – Broxzier
Tôi đã tìm ra vấn đề. Các thiết lập IE đã được thiết lập để phóng to toàn bộ trang in. Embarrasing: P – user1431627
Bạn có chỉ định chiều rộng bằng CSS không? –
@BramVanroy No? – user1431627
@Pete http://pastebin.com/wMz33J5Q – user1431627