html表格网页自适应居中,web前端:css自适应居中方法总结

下面来看一个最简单的小案例,在浏览器窗口居中一个小盒子:

8ad6e9ec4d635ecb7737400ca9d24bf3.gif

就这样一个很简单的小案例,你能够想到多少种方法来实现呢?对块元素盒子的左右居中相信大家都不陌生,{margin:auto;}就能够实现,但是对于垂直自适应居中就不起作用了,下面就从最简单的说起。

标签结构如下:

815b0f215dad15578da1a03111eb92e7.png

方法一:大伙熟知的居中方法

22d97db3911254fb459e307f417d8474.png

这种方法很简单,也很直观,但是有一定的局限性,就是固定了盒子的宽高,写死了margin值,而且需要一定的计算。

方法二:少部分人知道的居中方法

300a8ff1caf61e0e3bfcfb809037ad33.png

这种方案比较取巧,而且与盒子的宽高等无关,也不需要计算,不过经过测试发现IE7及其以下并不支持这种方案,如果项目不要求兼容到IE7及其以下的话可以作为首选,如果要考虑的话第一种方案兼容的蛮好。

方法三(1):flex弹性盒模型

098efd0fe17a73be8e39359c83b9a053.png

学习过css3盒模型的伙伴应该深有感觉,这玩意简直太爽了,不过他的兼容性可不容乐观,所以只是大量的运用在了移动端或者是pc端不考虑低版本浏览器兼容的项目。

方法三(2):box弹性盒模型

b31e7944c656210799f697a5550c0c44.png

这哥们常常配合flex盒模型做一些不同版本浏览器的兼容性处理,不过这哥们本身的兼容性可没有flex那么好了,功能也稍微逊色于flex,不过作为资深的css玩家,这东西还是需要懂的。

方法四:table布局(鲜有人熟悉的居中方法)

77c29876117b28d1dba17255513b033e.png

通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格那很方便的居中特性了,不过对于IE7及其以下的浏览器是不支持的!不过对于IE7及其以下浏览器的固执,我们来看看下面一种方案配合起来解决这个兼容。

方法五:font-size居中(不可思议吧,IE7、IE6)

995b20ba01802f3cb0d1c04e407d3b11.png

这种方案需要知道父元素的宽高,然后把父元素的font-size值设置为父元素的高度除以1.14,这样在IE7及其以下的浏览器能够做到居中,当然这里不是自适应了,如果需要自适应的话可以结合js来实现,即js动态获取父元素的宽高值然后计算出父元素font-size的值,大伙可以自己试试。

笔者:清心

QQ :564537488

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值