margin:0 auto 与 text-align的区别是什么？

是不是页面中头部DIV 中部DIV 底部DIV只要设置了margin：0 auto属性就可以居中显示了？

还是有分情况才能居中显示？具体怎么分情况？麻烦老师解答一下

weixin_慕后端7118097 2019-09-11

源自：HTML5标签变化 3-12 状态标签

12

收起

5回答

慕移动3569406 2019-12-14 19:51:05

margin： 0 auto；

就是上下外边距为0，左右外边距为auto

当auto用来设置左右外边距的时候，其实就是让浏览器将这一行剩余的宽度计算出来。

可以用F12看看，这个div左右都有黄色的区块，这个区块就是margin的区域。

而当设置左右都是auto的时候，就是让左右的外边距平分剩下的宽度的，假设父容器是1000px，要居中的div是100px，那auto就是被计算为450px, 所以div才会居中。

不过条件是被居中的元素是块级元素，并且设置了宽度的， 因为div是块级元素，块级元素默认是平铺父容器的，也就没有了剩余的空隙，没有空隙，margin：0 auto就不能起作用了。

qq_wm_6 2019-09-21 14:33:04

我的理解是margin:0 auto对块级边框进行样式设置自动水平居中，但前提是这个块级得设置width的样式。text-align是对文字，文本类进行水平居中!

敲着敲着 2019-09-17 00:33:46

有区别，margin：0 auto;实现的是元素的外边框上为零，左右自动居中，但元素要设置width，才能实现；但元素里面的文本不会发生改变。text-align:实现容器里的文本水平居中。

好帮手慕码 2019-09-11 19:39:17

同学你好！

不能，一个元素要同时设置宽度和margin: 0 auto;才能居中，例如：

效果：

如果帮助到了你，欢迎采纳，祝学习愉快~

提问者 weixin_慕后端7118097 #1

就是说设置margin居中的这个框本身要有宽度才能居中，然后外面的DIV1是设置为宽度百分比还是自定义PX，对于设置margin这个的居中效果不影响对吗？不管怎么变都还是会相对于大的框架居中吗？

2019-09-11 22:44:54
好帮手慕码回复提问者 weixin_慕后端7118097 #2

对的，外层的div的宽度是不会影响里面的div居中的。如果帮助到了你，欢迎采纳，祝学习愉快~

2019-09-12 10:09:00

好帮手慕码 2019-09-11 19:23:32

同学你好！
1.使用margin：0 auto的话，还需要设置元素得宽度

2.一般来说margin：0 auto设置块级元素的居中，text-align主要是用来设置文本水平居中。

如果帮助到了你，欢迎采纳，祝学习愉快~

提问者 weixin_慕后端7118097 #1

<div style="width:100%;"> <div style="width:80px;"> </div> </div> 这样就能居中吗?

2019-09-11 19:32:34

相似问题

margin{0 auto}与text-align{center}有什么区别？老搞混

margin:0 auto;和text-align: center;有什么区别？

text-align:center; 和 margin: 0 auto;的区别

text-align与margin：0 auto的居中问题

4-7 编程练习，为什么“.big{margin:0 auto;}”不能实现整体居中？

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

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

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

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载