CSS Fixed Position with Auto Margin

CSS Fixed position with Auto Margin

You cant do that with margin:auto, but you can do something like this:

#CSS-SELECTOR-YOU-ARE-USING{
    background:#FF0000; // Just so you can see whats going on
    position:fixed; // Position the element
    right:50%; // Move it to the right for 50% of parent element
    margin-right:-250px; // You need here to put 1/2 of what you have below in width
    width:500px;
}

This way you move element to the right for 50%, and then move it back for half of its width. That way you get centered element with position:fixed.

CSS position fixed AND margin 0 auto

you can make the following

#navigation {
    position:fixed;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width: 1280px;
    height: 35px;
    padding-top: 10px;
    background-color: #000000;
}

Why isn't my margin working with position: fixed?

i think you have to explictly declare the position of fixed div.

div.header {
position: fixed;
width: 100%;
background: #ffffff;
top:20px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}

and assign margin at the content div

div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 80px auto;
}

check this fiddle if works like you need:
https://jsfiddle.net/0cmvg92m/3/

Position at left border of fixed width auto margin

Since your DIVs have fixed position, you'll need to use CSS calc() to position them:

div.is-left {
  left: calc(50% - 400px);
}

div.is-right {
  right: calc(50% - 400px);
}

Example Fiddle

CSS Fixed Position Interferes With Auto Width

Fix your left and right due to you are using position:fixed.
Add this lines to your class:

left:0;
right:0;

position: fixed with margin: auto in IE9/10

You need to specifically add width: 100% to your element in question.

Demo

css

.banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: red;
    height: 50px;
}

---

In-fact it works equally well in IE9

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

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>

Center a position:fixed element

You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

Thus, provided a <!DOCTYPE html> (standards mode), this should do:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Or, if you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.

---

Related Topics