#问问问#谢谢谢谢###

我想问下为什么垂直居中需要top:0;bottom:0;margin:auto 0;才能起到垂直居中效果,直接margin:auto 0;为什么起不到居中效果呢

源自：CSS定位（position） 4-3 编程练习

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2020-04-29 09:31:00

同学你好，这是设置定位元素垂直水平居中的一种方式。

这个现象可以称为拔河效应：盒子设置left：0 ；想要让它显示在左边，设置了right:0，又想要让它又显示在右边。两边都在拉它，这个时候出现margin:auto; 我直接在中间好了。

而top：0和bottom:0也是一样的，上下都在拉它，然后出现margin:auto，垂直方向上也居中显示了。

祝学习愉快~

好帮手慕糖 2020-04-27 09:50:02

同学你好，可以参考如下理解：

1、块级元素，自己占一行，在css的规范中，元素他的左外边距+左边框宽度+左内边距+内容的宽度+右内边距+右边框+右外边距=包含块的宽度，如果给他的左右外边距设置为auto的时候，他会实现平分剩下的距离，从而达到一个水平居中的效果。

2、但是块级元素的高度并不会自动扩充，是无法直接使用auto设置垂直居中。所以需要结合定位，然后设置bottom与top为0。设置垂直居中。

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

提问者母鸡阿 #1

您好，我想问一下结合定位后 top=0；bottom=0；这两个是什么意思呢，为什么要在这两个的基础上在设置margin：auto 0 呢谢谢谢谢

2020-04-28 21:57:29

求问，谢谢

登录后可查看更多问答，登录/注册

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

问答作业

16 1

65 3

26 3

18 1

188 1

请稍等 ...

请选择置顶位置