CSS Position fixe avec marge automatique

Question

Je veux un composant qui conserve le centre horizontal de la page (deux colonnes), et j'ai un sous-composant (colonne de droite) dont je veux que sa position soit fixe, donc le sous-composant La position du composant doit être fixée, mais les deux colonnes doivent être centrées.

#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

Vous ne pouvez pas le faire avec margin:auto, mais vous pouvez faire quelque chose comme ceci:

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

De cette façon, vous vous déplacez élément à droite pour 50%, et passer ensuite en arrière pour la moitié de sa largeur. De cette façon, vous obtenez l'élément centré avec position:fixed.

Answer 2

J'aime utiliser un emballage comme Asolution pour ce problème:

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

Answer 3

Vous pouvez utiliser margin: 0 auto avec position: fixed si vous définissez left et right.

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

Cela fonctionne également avec position: absolute; et verticalement.

Démo: http://codepen.io/pstenstrm/pen/myaWVJ