CSS Posición fija con Margen automático

Question

Quiero un componente que mantenga el centro horizontal de la página (dos columnas), y tengo un subcomponente (columna derecha) que quiero que se fije su posición, por lo que el subtítulo La posición del componente debe ser fija, pero las dos columnas completas deben estar centradas.

#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

Usted no puede hacer eso con margin:auto, pero se puede hacer algo como esto:

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

Esta forma de mover el elemento hacia la derecha el 50%, y luego hacia atrás para que la mitad de su anchura. De esta forma obtienes el elemento centrado con position:fixed.

Answer 2

me gusta utilizar un envoltorio como aSolution para este problema:

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

Answer 3

Usted puede utilizar margin: 0 auto con position: fixed si establece left y right.

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

Esto también funciona con position: absolute; y verticalmente.

Demostración: http://codepen.io/pstenstrm/pen/myaWVJ