本文摘自PHP中文网,作者青灯夜游,侵删。
方法:1、利用“display:table-cell;vertical-align:middle;”样式;2、使用flex布局;3、利用绝对定位和负边距;4、利用绝对定位和transform属性;5、利用绝对定位和top、left等属性。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。
方法1:table-cell
html结构:
1 2 3 |
|
css:
1 2 3 4 5 |
|
方法2:display:flex
1 2 3 4 5 |
|
方法3:绝对定位和负边距
1 2 3 4 5 6 7 8 9 10 11 |
|
方法4:绝对定位和0
1 2 3 4 5 6 7 8 9 10 11 12 |
|
这种方法跟上面的有些类似,但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中,很神奇吧。不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。
方法5:translate
1 2 3 4 5 6 7 8 |
|
这实际上是方法3的变形,移位是通过translate来实现的。
方法6:display:inline-block
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
这种方法确实巧妙...通过:after来占位。
(学习视频分享:css视频教程)
以上就是css垂直居中的方法有哪些的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
深入浅析css text-emphasis属性,看看它的用法!
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者