盒子水平居中问题

橙色区域设置了margin：0 auto；为什么无法实现水平居中和垂直居中？

踩一个脚印 2022-08-30

源自：浮动与定位 4-4 自由编程

9

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2022-08-30 11:25:23

同学你好，代码中margin:0 auto;实现水平居中，不能实现垂直居中。

看截图代码水平居中是实现的，center中有logo图，占据了center一部分，看不到橙色背景而已

建议直接将代码粘贴上来，不要截图，便于帮助测试。

祝学习愉快~

踩一个脚印提问者 #1

那不设置绝对定位的情况下要想让橙色部分垂直居中，只能是给橙色部分的父盒子设置padding-top吗

2022-08-30 11:39:20
好帮手慕星星回复提问者踩一个脚印 #2

一般情况下.center与父盒子header高度一致，不用设置间距实现垂直居中。.center中的内容可以再设置padding-top值垂直居中。

2022-08-30 13:34:27

相似问题

如何设置中间浮动的盒子居中呢？

老师，请问我的列表为什么不能在页面上水平居中显示呢？另外，代码还有哪些地方可以补充呢？

关于背景图片的引入以及垂直居中有一些问题

请老师看看为什么导航条不能居中？

如果有两个盒子，怎么一起水平居中？

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

前端工程师

参与学习人
提交作业 15691 份
解答问题 17891 个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

本课精华内容

问答作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

201 5

老师给点提示。

155 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载