为什么magin:auto不足以将绝对或固定位置居中? [英] Why magin:auto is not enough to center position absolute or fixed?

问题描述

我试图将div的内容居中，我的父容器设置为Relative.

I am trying to center the contents of a div, my parent container is set to Relative.

我正在内部div上使用它

I am using this on the inner div

    position: absolute;
    margin: auto;
    width: 70px;
    height: 70px;

但是它拒绝居中，我不得不在左边和右边加上0，但是我不明白为什么.

but it refuses to center, i had to add a left and right of 0, but i don't understand why i.e.

    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    width: 70px;
    height: 70px;

我认为居中只需要一个宽度即可.

I thought to center only requires a width, which is has.

对于为什么将right/left设置为0-似乎可行，我有些困惑.

I am a little confused at why setting the right / left to 0 - seems to work.

如果图像为70px，父框为200px(正确)，则将右设置为0，左设置为0-这实际上是在做什么?

Also if the image is 70px and the parent box is 200px (which it is), setting right to 0 and left to 0 - what is this actually doing?

任何想法，我可能都无法正确理解.

Any ideas, I am probably not understanding it correctly.

谢谢.

推荐答案

您需要参考规范才能理解这一点.如果未使用position:absolute定位元素，则需要考虑本节您可以在其中阅读:

You need to refer to the specification to understand this. If your element is not positionned using position:absolute then you need to consider this section where you can read:

如果'margin-left'和'margin-right'均为'auto'，则它们使用的值相等. 这使元素相对于包含块的边缘水平居中.

对于流入元素，除宽度外，仅需留有边距.

For in-flow elements, only margin is needed in addition to the width.

当涉及到position:absolute元素时，我们指的是

When it comes to position:absolute elements we refer to this section

如果"left"，"width"和"right"的全部三个均为"auto":首先将"margin-left"和"margin-right"的所有"auto"值设置为0

If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0

很明显，如果您看不到任何左，右或宽度，则页边距将计算为0(无中心)

It's clear that if you don't see any left, right or width, margin will get computed to 0 (no centring)

如果三个都不是'auto':如果'margin-left'和'margin-right'都是'auto'，则在两个边距得到相等值的额外约束下求解方程 strong>

If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values

当您设置向左，向右和宽度时，边距将获得相等的值(我们可以在公式中找到)，并且您将获得中心点.

When you set left, right and width the margin will get equal values (that we can found with the formula) and you will have centring.

如果您继续阅读，还可以看到:

If you continue reading you can also see:

否则，将'margin-left'和'margin-right'的'auto'值设置为0，然后选择以下六个规则之一.

Otherwise, set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.

因此，仅当我们设置左，右和宽度时，我们才会获得页边距的居中效果.省略一个不会使元素居中.

So we only get a centring effect for margin if we set left, right and width. omiting one will not center the element.

在下面的示例中将说明规范中详述的8种不同情况.

Below an example to illustrate the 8 different cases like detailed in the specification.

.box {
  height:50px;
  border:1px solid;
  position:relative;
  margin:5px;
}
.box > div {
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  width:200px;
  background:red;
  color:#fff;
}

<div class="box">
  <div>some text</div>
</div>
<div class="box">
  <div style="width:auto;">some text</div>
</div>
<div class="box">
  <div style="left:auto">some text</div>
</div>
<div class="box">
  <div style="left:auto;width:auto">some text</div>
</div>
<div class="box">
  <div style="right:auto">some text</div>
</div>
<div class="box">
  <div style="right:auto;width:auto;">some text</div>
</div>
<div class="box">
  <div style="right:auto;left:auto;">some text</div>
</div>
<div class="box">
  <div style="right:auto;left:auto;width:auto;">some text</div>
</div>

需要注意的是，您不一定需要0，但是您需要指定与auto不同的任何值，左右两边的值都相同.

Worth to note that you don't necessarely need 0 but you need to specify any value different from auto which is the same for left and right.

.box {
  height:50px;
  border:1px solid;
  position:relative;
  margin:5px;
}
.box > div {
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  width:200px;
  background:red;
  color:#fff;
}

<div class="box">
  <div>some text</div>
</div>
<div class="box">
  <div style="left:10px;right:10px;">some text</div>
</div>
<div class="box">
  <div style="left:-10px;right:-10px;">some text</div>
</div>
<div class="box">
  <div style="left:50px;right:50px;">some text</div>
</div>
<div class="box">
  <div style="left:300px;right:300px;">some text</div>
</div>
<div class="box">
  <div style="left:3000px;right:3000px;">some text</div>
</div>

当然，当两个值都很大时，由于以下规则，您将不会获得居中效果:

Of course, when both values are very big you will not get a center effect due to this rule:

..除非这会使他们否定，在这种情况下，如果包含块的方向为'ltr'('rtl')，则设置'margin-left'('margin-right' )归零，然后求解"margin-right"("margin-left").如果'margin-left'或'margin-right'中的一个为'auto'，则求解该值的方程式. 如果值过于受限，请忽略"left"(如果包含块的"direction"属性为"rtl")或"right"(如果"direction"为'ltr')并求解该值.

..unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

---

在垂直方向(顶部，底部和高度)上考虑的几乎相同: https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

这篇关于为什么magin:auto不足以将绝对或固定位置居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！