CSS Fixed Position mit Auto Margin

Question

Ich möchte eine Komponente, die horizontale Mitte der Seite (zweispaltig) hält, und ich habe eine Unterkomponente (rechte Spalte), die ich möchte ihre Position zu fixieren, so dass die Sub Die Position der Komponente muss fixiert werden, aber die zwei Spalten müssen zentriert werden.

#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

Sie kann nicht das tun, mit margin:auto, aber man kann so etwas tun:

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

diese Weise können Sie Element auf der rechten Seite für 50% bewegen, und es dann für die Hälfte zurückgehen seiner Breite. Auf diese Weise erhalten Sie ein zentriertes Element mit position:fixed.

Answer 2

Ich mag einen Wrapper als Eine Lösung für dieses Problem verwenden:

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

Answer 3

Sie margin: 0 auto mit position: fixed verwenden können, wenn Sie left und right gesetzt.

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

Dies funktioniert auch mit position: absolute; und vertikal.

Demo: http://codepen.io/pstenstrm/pen/myaWVJ