Đị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
Bạn có chỉ định chiều rộng bằng CSS không? –
@BramVanroy No? – user1431627
@Pete http://pastebin.com/wMz33J5Q – user1431627