Web前端:自适应居中方法总结

    最近看到了一位大牛写的一个小的前端动画的代码,body中出现了一种最新的网页自适应居中的方法,结合以前在公众号中看到的一篇文章,在这里对网页自适应居中方法做个小小的总结:

1、这是一种简单的方法,但是稍有局限性,设定了盒子的宽高
Web前端:自适应居中方法总结_第1张图片

2、这种方法不需要计算,盒子的宽高也不影响,但是IE7及以下的浏览器并不支持

Web前端:自适应居中方法总结_第2张图片

3、table布局,display:table-cell,将整个界面模拟成一个表格单元格,表格的居中特性就可以很好利用了,但是IE7及以下的浏览器仍然是不支持的

Web前端:自适应居中方法总结_第3张图片

4、这个方法是css3盒模型中的很好用的一种,但是兼容性并不好。其中justify-content代表主轴(横向)居中,align-items则是辅轴(竖向)居中

Web前端:自适应居中方法总结_第4张图片

自适应居中的方法还有很多,以后再总结给大家啦!前端的每一种实现方法都比较灵活,要结合兼容性要求等情况,选择最适合的那种。

你可能感兴趣的:(Web前端)