Làm thế nào để tập trung một bảng của màn hình (theo chiều dọc và chiều ngang)

Question

tôi có các mã khối:

<table border="1px"> 
<tr> 
<td> 
my content 
</td> 
</tr> 
</table> 

Tôi muốn hiển thị bàn của tôi ở trung tâm của màn hình (theo chiều dọc và theo chiều ngang).

Here is a demo.

Tôi làm cách nào để thực hiện điều đó?

Answer 1

Điều này sửa lỗi trung tâm hộp chết trên màn hình:

HTML

<table class="box" border="1px"> 
    <tr> 
     <td> 
      my content 
     </td> 
    </tr> 
</table> 

CSS

.box { 
    width:300px; 
    height:300px; 
    background-color:#d9d9d9; 
    position:fixed; 
    margin-left:-150px; /* half of width */ 
    margin-top:-150px; /* half of height */ 
    top:50%; 
    left:50%; 
} 

Xem kết quả

http://jsfiddle.net/bukov/wJ7dY/168/

Answer 2

Tôi nghĩ rằng điều này sẽ làm các trick:

<table border="1px" align="center"> 

Theo http://w3schools.com/tags/tag_table.asp này bị phản đối, nhưng thử nó. Nếu nó không hoạt động, đi cho phong cách, như đã đề cập trên trang web.

Answer 3

Căn giữa nằm ngang dễ dàng. Bạn chỉ cần đặt cả lề phải "tự động":

table { 
    margin-left: auto; 
    margin-right: auto; 
} 

Dọc trung thường được thực hiện bằng cách thiết lập phụ huynh kiểu hiển thị yếu tố để table-cell và sử dụng vertical-align tài sản. Giả sử bạn có một <div class="wrapper"> xung quanh bàn của bạn:

.wrapper { 
    display: table-cell; 
    vertical-align: middle; 
} 

Thông tin chi tiết có thể được tìm thấy trên http://www.w3.org/Style/Examples/007/center

Nếu bạn cần hỗ trợ cho các phiên bản cũ của trình duyệt Internet Explorer (Tôi không biết những gì làm việc trong những phiên bản của trình duyệt lạ và hiếm khi được sử dụng ;-)) thì bạn có thể muốn search the web để biết thêm thông tin, như: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (chỉ là lần truy cập đầu tiên, có vẻ như đề cập đến IE)

Answer 4

This guy có cây đũa thần mà chúng tôi đang tìm kiếm, các bạn.

Để trích dẫn câu trả lời của mình:

chỉ cần thêm "position: fixed" và nó sẽ giữ nó theo quan điểm ngay cả khi bạn di chuyển xuống. nhìn thấy nó ở 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; 
} 

Answer 5

Tôi đã sử dụng cheat này ít trong một thời gian bây giờ. Bạn có thể thích nó.tổ bảng bạn muốn tập trung trong bảng khác:

<table height=100% width=100%> 
<td align=center valign=center> 

(thêm bảng của bạn ở đây)

</td> 
</table> 

align và valign đặt bàn chính xác ở giữa màn hình, không có vấn đề gì khác đang diễn ra.

Answer 6

Tôi đã thử thuộc tính căn chỉnh phía trên trong HTML5. Nó không được hỗ trợ. Ngoài ra tôi đã cố gắng flex-align và vertival-align với các thuộc tính phong cách. Vẫn không thể đặt TABLE ở giữa màn hình. Bảng đặt kiểu sau ở giữa theo chiều ngang.

style = "margin: auto;"

Answer 7

Đối với liên kết ngang (Không CSS)

Chỉ cần chèn một thuộc tính align bên trong thẻ bảng

<table align="center"></table