margin: 0 auto；的作用

在html中，为什么我们设置一个margin: 0 auto;就可以使得块元素居中？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>document</title><style>.box{width: 100px;height: 200px;background-color: rgb(255, 153, 0);margin: 0 auto;}</style>
</head>
<body><div class="box"><p>为什么会居中？</p></div>
</body>
</html>

元素的水平方向的布局:

元素在其父元素中水平方向的位置由以下几个属性共同决：
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left+border- left+padding- left+width+padding - right +border-right+margin-right =其父元素内容区的宽度( 必须满足)

以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整

调整的情况：

如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足

这七个值中有三个值可设置为auto
width
margin-left
maring-right

如果某个值为auto，则会自动调整为auto的那个值以使等式成立

如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0

如果将三个值都设置为auto，则外边距都是0，宽度最大
如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
示例：
width:xxxpx;
margin:0 auto;

margin: 0 auto；的作用相关推荐

css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
text-align:center 和margin:0 auto的区别
基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性.支持值 ...
[css] 怎么IE6下在使用margin:0 auto；无法使其居中？
[css] 怎么IE6下在使用margin:0 auto;无法使其居中? 浏览器解析的问题,IE6下需要对居中的元素设置text-align:center属性使其margin:0 auto;生效. 个 ...
块状元素的居中，首先设置宽度，再设 margin: 0 auto
块状元素的居中,首先设置宽度 width="10px",再设 margin: 0 auto; . 转载于:https://www.cnblogs.com/npk19195globa ...
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
行内元素设置margin:0 auto无效的问题
行内元素指的是可在同一行内排列的元素,列举几个常用行内元素:img.input.span.label.a.textarea.button. 通常要给元素设置居中得效果的话,很多人会先想到margin: ...
margin:0 auto是什么意思
margin是外边距的意, 当一个元素样式属性里有dumargin:0 auto时,并且父元素的宽度是确定的, 意思是这个元素处于其父元素的居中位置,并且这个元素的上下外边距为0 即:上下外边距为0, ...
关于margin: auto及margin: 0 auto的一些见解
在写css时margin:auto;使用频率非常高,常用于div的居中. 何为margin? margin是指块级元素的外边距,如下图所示,XXXXX是div中的内容,通过设置margin的值,可控制 ...
margin:auto 和margin:0 auto的区别
1.意思不同.margin:auto=margin:auto auto auto auto,表示上下左右都为auto:margin:0 auto=margin:0 auto 0 auto,表示上下为0 ...

margin: 0 auto；的作用

元素的水平方向的布局:

margin: 0 auto；的作用相关推荐

最新文章

热门文章