如何让table在body下垂直居中

最新推荐文章于 2023-09-15 21:23:05 发布

转载最新推荐文章于 2023-09-15 21:23:05 发布 · 5.3k 阅读

asp.Net 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种使用HTML进行表格布局的方法，并提供了实际的代码示例。该布局方式能在多种浏览器中稳定显示，适用于需要精确控制元素位置的场景。

经测试多浏览器下实用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>test</title>
 <meta http-equiv=Content-Type content="text/html; charset=utf-8">
 <meta content="MSHTML 6.00.6000.16825" name=GENERATOR>
</head>
<body>
    <table height="100%" width="100%" border="0">
        <tbody>
            <tr>
                <td align="center" valign="middle">
                    <table cellspacing="0" cellpadding="0" width="270" align="center" border="0">
                        <tbody>
                            <tr>
                                <td>
                                    213
                                </td>
                                <td>
                                    12
                                </td>
                                <td>
                                    12
                                </td>
                            </tr>
                            <tr>
                                <td>123
                                </td>
                                <td>
                                    321
                                </td>
                                <td>
                                    12
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

最关键的应该是：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<div style="position:absolute;top:50%;left:50%;margin:-250px 0 0 -260px;width:400px;height:200px;font-family:Arial, Helvetica, sans-serif;color:#666666 ">