cssmargin属性auto,css中margin：auto属性的使⽤⽅法
css中margin:auto属性的使⽤⽅法
发布时间：2020-06-25 10:53:17
来源：亿速云
阅读：221
作者：Leah
今天就跟⼤家聊聊有关css中margin:auto属性的使⽤⽅法，可能很多⼈都不太了解，为了让⼤家更加了解，⼩编给⼤家总结了以下内容，希望⼤家根据这篇⽂章可以有所收获。
我们都知道使⽤margin:auto可以让元素⽔平居中的。但你有没有想过使⽤margin:auto可以让元素⽔平居中的原因，要回答这个问题，我们⾸先需要看⼀下margin：auto的⼯作原理。auto如果它适⽤于垂直居中，那么⼜是⼀种什么情况，下⾯我们来看具体内容。
⾸先auto是做什么的？
定义auto元素，因元素类型和上下⽂⽽异。在边距中，auto可以表⽰两种情况：占⽤可⽤空间或0 px。这两个将为元素定义不同的布局。
“⾃动”占⽤可⽤空间
这是我们利⽤auto最常见的⽤法。通过分配auto元素的左右边距，它们可以平等地占据元素容器中的可⽤⽔平空间 - 因此元素将居中。
margin: auto;
width: 250px;
height: 125px;
background-image: linear-gradient(45deg, #84ECEF 10%, #F8F62F 60%, #FDC018);
}
#outer {
height: 500px;
width: 500px;
background: #1F1D20;
background-image: linear-gradient(#757575 1px, transparent 1px), linear-gradient(90deg, #757575 1px, transparent 1px);
background-size: 25px 25px;
}
效果如下：
但是，这只适⽤于⽔平边距，它不适⽤于浮动和内联元素，并且它本⾝也不能⽤于绝对和固定定位元素。
由于auto左右边距均匀地占据“可⽤”空间，当你auto只给出其中⼀个时，你认为会发⽣什么？
左边距或右边距auto将占据所有“可⽤”空间，使元素看起来像是向右或向左偏移。
margin-right: auto;
width: 250px;
height: 125px;
background-image: linear-gradient(45deg, #84ECEF 10%, #F8F62F 60%, #FDC018);
}
#outer {
height: 500px;
width: 500px;
background: #1F1D20;
margin属性怎么用background-image: linear-gradient(#757575 1px, transparent 1px), linear-gradient(90deg, #757575 1px, transparent 1px);
background-size: 25px 25px;
}
效果如下：
“auto”为0px
如前所述，auto在浮动，内联和绝对元素中不起作⽤。所有这些元素已经决定了它们的布局，所以没有auto⽤于边距并期望它像这样集中。
这将破坏使⽤类似float的最初⽬的。因此设置这些元素的auto值为0px。
auto如果它没有宽度，也不会对典型的块元素起作⽤。到⽬前为⽌我向你展⽰的所有例⼦都有宽度。
值的宽度auto将具有0px边距。块元素的宽度通常覆盖其整个容器，它是auto或100%，因此margin:auto将被设置为0px。
auto设置垂直会是怎样的呢？
auto在顶部和底部边距中总是计算为0px(绝对元素除外)。W3C规范说它是这样的：
“如果”margin-top“或”margin-bottom“为”auto“，则其使⽤值为0”
到⽬前为⽌，为什么这没有说。这可能是因为典型的垂直页⾯流，页⾯⼤⼩在⾼度⽅⾯增加。因此，相对于页⾯本⾝⽽⾔，将元素垂直居中于其容器中不会使其显⽰为居中，这与⽔平完成(在⼤多数情况下)不同。
也许是因为同样的原因，他们决定为绝对元素添加⼀个例外，它可以在整个页⾯的⾼度垂直居中。
这也可能是由于边缘坍塌效应(相邻元素“边缘”的崩溃)，这是垂直边距的另⼀个例外。
然⽽，后者似乎是⼀个不太可能的情况 - 因为不会折叠其边距的元素 - 如Floats和overflow其他元素visible，仍然为其分配0px垂直边距auto。
以绝对定位元素为中⼼
由于绝对定位元素恰好存在异常，我们将使⽤auto值垂直和⽔平居中。但在此之前，我们需要出margin:auto实际⼯作的时间，就像我们希望它在绝对定位的元素中⼀样。
这是另⼀个W3C规范的⽤武之地：
“如果”left“，”width“和”right“中的所有三个都是”auto“：⾸先将”margin-left“和”margin-right“的任何”auto“值设置为0 ... ”
“如果三者中没有⼀个是”⾃动“：如果”margin-left“和”margin-right“都是”auto“，则在额外约束条件下解决⽅程式，即两个边距得到相等的值”
这⼏乎说，对⽔平auto的利润率，抓住间隔相等，则对值left，width并且right不应该auto，他们的默认值。因此，我们所要做的就是在绝对定位的元素中赋予它们⼀些价值。left并且right应该具有相同的值以实现完美的居中。
该规范还提到了垂直边距类似的东西。
“如果”top“，”height“和”bottom“中的所有三个都是auto，则将”top“设置为静态位置...”
“如果三者中没有⼀个是”⾃动“：如果”margin-top“和”margin-bottom“都是”auto“，则在额外约束下解决⽅程式，即两个边距得到相等的值......”
因此，对于⼀个绝对元件被垂直居中，其top，height和bottom值不应该auto。
现在结合所有这些，这是我们将得到的：
CSS
Result
EDIT ON#inner {
margin: auto;
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
width: 250px;
height: 125px;
background-image: linear-gradient(45deg, #84ECEF 10%, #F8F62F 60%, #FDC018);
}
#outer {
position: relative;
height: 500px;
width: 500px;
background: #1F1D20;
background-image: linear-gradient(#757575 1px, transparent 1px), linear-gradient(90deg, #757575 1px, transparent 1px);
background-size: 25px 25px;
}
效果如下：
最后
如果您想要将页⾯上的元素向右或向左偏移⽽没有包含它的其他元素(就像浮点数⼀样)，请记住有auto⽤于边距的选项。
将元素转换为绝对定位只是为了使它可以垂直居中可能不是⼀个好主意。还有其他选项，如flexbox和CSS变换，更适合那些。
看完上述内容，你们对css中margin:auto属性的使⽤⽅法有进⼀步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云⾏业资讯频道，感谢⼤家的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。