为什么他这样能让元素垂直居中呢？

width:224px;

height:364px;

top: 0;

bottom: 0;

left:0;

margin: auto 0;

position: fixed;

小老哥丶 2020-01-12

源自：CSS定位 7-2 编程练习

收起

2回答

好帮手慕酷酷回答被采纳获得+3积分 2020-01-13 15:07:22

同学你好，这里不会冲突，可以这样理解，在这个案例中，

top+ margin-top+ height+ margin-bottom+bottom =整个元素盒子的高度

元素的height为定值，当top、bottom 为0px时，那么margin-top和margin-bottom为auto，则平分剩余空间，居中。

这个是对于固定定位元素，居中的一个特殊用法，同学记住就可以了。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

小老哥丶提问者 #1

那其他元素怎么垂直居中呢

2020-01-13 17:33:14
好帮手慕酷酷回复提问者小老哥丶 #2

同学你好，其他的元素，需要根据具体的样式代码进行调整。如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

2020-01-13 17:49:35

好帮手慕酷酷 2020-01-13 11:52:49

同学你好，因为设置此样式中的 margin: auto 0;可以让元素的布局上下垂直居中，也就是自动适应浏览器，左右外边距为0。这样就可以让元素垂直居中。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

提问者小老哥丶 #1

但是如果没有 top: 0; bottom: 0;也不会使元素居中呢，为什么要这两个，他们一上一下不是冲突吗？

2020-01-13 11:54:45

相似问题

请老师看一下代码，为何还是实现不了水平居中和垂直居中

div包裹了p.实现垂直居中为什么用上一个div无效呢？

行高设置成了和元素高度一样不能垂直居中？

3-4垂直居中问题

为什么无法垂直居中

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

2. 从网页搭建入门JavaWeb

参与学习人
提交作业 676 份
解答问题 9666 个

本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！

了解课程

本课精华内容

问答作业

4-3个人程序源码，提供给各位参考！

63 1

2-4 编程练习

22 1

text-align和direction有什么区别

13 1

交作业交作业交作业

225 2

是不是只有在JS语言中局部变量的定义才可以放在else语句中

24 1

查看更多本课问答

请稍等 ...

为什么他这样能让元素垂直居中呢？

为什么他这样能让元素垂直居中呢？

正在回答

请选择置顶位置