HTML中实现table垂直居中

html中是没办法实现上下居中的,如果设置上下居中,需要通过js程序来设置。

方法一:在外面嵌套一层table,用table中的td来控制居中

<form id="form1" method="post">
        <table border=0 cellpadding=0 cellspacing=0 style="width:100% ;height:100%">
            <tr>
                <td style="width:100%;" align="center" valign="middle">
                    <table style="background-color:lightskyblue; margin:auto">
                        <tr>
                            <td></td>
                            <td align="center"> 用户登录 </td>
                            <td></td>
                        </tr>
                    </table>
                </td>
      </tr>
        </table>
    </form>

方法二:
table {
    width: 600px; height: 400px;//可随意
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

方法三:

 table{
	margin:0px auto;   
	width:300px;   
    	height:200px; 
    	position:absolute;
    	top:50%;
    	left: 50%;
    	margin-left: -150px;
    	margin-top: -100px;
 }
left:50%是元素最左边(左上角)和中线重合的地方,这个时候是不居中的,需要减去该元素的宽度一半,即margin-left等于负的宽度的一半

  • 3
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值