CSS Фиксированная позиция с Auto Margin

Question

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

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

Answer 1

Вы можете использовать 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

Answer 2

Вы не можете сделать это с 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.

Answer 3

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

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