CSS使用自动保证金固定头寸

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.