如何将屏幕表格居中（垂直和水平） [英] How to center a table of the screen (vertically and horizontally)

问题描述

我有这些代码块：

 < table border =1px> 
< tr> 
< td> 
我的内容
< / td> 
< / tr> 
< / table> 
  

我想在屏幕中心显示我的表格（垂直和水平）。

这是一个演示 a>。

我该怎么做？
$ b

HTML

 < table class =boxborder =1px> 
< tr> 
< td> 
我的内容
< / td> 
< / tr> 
< / table> 
  

CSS

  .box {
 width：300px; 
 height：300px; 
背景颜色：＃d9d9d9; 
位置：固定; 
 margin-left：-150px; / *宽度的一半* / 
 margin-top：-150px; / *一半身高* / 
上限：50％; 
剩下：50％; 
} 
  

查看结果

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

I have these code block:

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

I'd like to show my table in the center of the screen (vertically and horizontally).

Here is a demo.

how can I do that?

解决方案

This fixes the box dead center on the screen:

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%;
}

View Results

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

这篇关于如何将屏幕表格居中（垂直和水平）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！