主要利用绝对定位,再用Javascript/JQuery调整到中间位置。相比第一种方法,此方法提高了class的灵活性。
父元素:
1 2 3 4 5 6 7 |
|
子元素:
1 2 3 4 5 |
|
水平垂直居中对齐:
1 2 3 4 5 |
|
JQuery:
1 2 3 4 5 6 7 8 |
|
几种方法的比较:
第一种CSS绝对定位margin调整,兼容性很好但是欠缺灵活性。如果有很多box里需要水平垂直居中,因其width,height不同而需要写不同的 .align-center 。
第二种使用脚本语言,兼容性很好且弥补了第一种的缺点。不因width,height的改变而影响水平垂直居中的效果。
第三种使用CSS3的一些新的属性,兼容IE10, Chrome, Firefox, 和 Opera。兼容性不太很好,不因width,height的改变而影响水平垂直居中的效果。
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
怎样用HTML和CSS做出大白
XHTML中有哪些常用的标签
在HTML/XHTML中的img图像标签应该如何使用
以上就是html的元素水平垂直居中应该怎么设置的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
关于Html valign属性的作用和使用方法详解(附使用方法实例)
更多相关阅读请进入《Html》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者