CSS Фиксированная позиция с автоматической маржей

Я хочу, чтобы компонент сохранял горизонтальный центр страницы (два столбца), и у меня есть подкомпонент (правый столбец), который я хочу, чтобы его положение было исправлено, поэтому положение подкомпонента фиксируется, но все два столбца должны быть центрированы.

#content {
    width: 1200px;
    height:auto !important;
    height:100%;
    min-height:100%;
    padding-top: 42px;
    padding-bottom: 100px;
    margin-auto: 0 auto;
    position: relative;
}

#left {
    width: 700px;
    float: left;
}

#right {
        width: 500px;
        position: fixed;
        top: 0px;
}

Ответы

Ответ 1

Вы не можете сделать это с помощью margin:auto, но вы можете сделать что-то вроде этого:

#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;
}

Таким образом вы перемещаете элемент вправо на 50%, а затем переместите его на половину своей ширины. Таким образом, вы получаете центрированный элемент с position:fixed.

Ответ 2

Вы можете использовать margin: 0 auto с position: fixed, если вы установите left и right.

.wrapper {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 500px;
    margin: 0 auto;
}

Это также работает с position: absolute; и вертикально.

Демо: http://codepen.io/pstenstrm/pen/myaWVJ

Ответ 3

Мне нравится использовать обертку как asolution для этой проблемы:

.wrapper {
  position: fixed;
  width: 100%;
  top: 0px;
}
.wrapper .right {
  width: 500px;
  margin: auto;
}