Why magin:auto is not enough to center position absolute or fixed?

问题

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

I am using this on the inner div

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

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.

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

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.

Thanks.

回答1:

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:

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

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

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

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

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

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:

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.

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>

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:

..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.

Almost the same is considered when it comes to the vertical direction (top, bottom and height): https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

回答2:

With right or left (and position: absolute) you are aligning the div absolutely to parent element, in your case with 0 offset. Try to play with their values in developer console in your browser.

回答3:

You can use left and right properties when your elements has position absolute/relative You can center your inner element in both axises using just margin: auto; or on x-axis using margin: 0 auto;.

.parent{
  width: 200px;
  height: 200px;
  background: red;
}

.child{
  margin: auto;
  width: 70px;
  height: 70px;
  background: green;
}

回答4:

The fix is absolute centering. You were almost there:

position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

You need to set all four directions to 0 and your child div will be perfectly centered within the parent.

来源：https://stackoverflow.com/questions/59723642/why-maginauto-is-not-enough-to-center-position-absolute-or-fixed

标签

css

css-position