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

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

3 个答案: