Question

请立即查看此jsfiddle以了解我的意思：http://jsfiddle.net/w7yayb5e/

基本上在这个模型中我有一个用css设计的圆形和矩形，并且绝对定位在应该是100％高度的背景上（无法在jsfiddle中使用它）。 / p>

HTML：

<section class="background">
    <div class="circle"></div>
    <div class ="rectangle"></div>
</section>

CSS：

.background {
    background: #666;
    height: 275px;
    width: 100%;
}

.circle {
    display: block;
    height: 100px;
    width: 100px;
    background: red;
    position: absolute;
    left: 20%;
    top: 20%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #fafafa;
    margin: 0 auto 40px;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15)
}

.rectangle {
    display: block;
    height: 50px;
    width: 200px;
    background: blue;
    position: absolute;
    right: 20%;
    top: 26.5%;
}

现在问题是：当我将窗户拉得更大时，两个物体相互滑动，很快到达真实页面上看起来很奇怪的地方。相反的情况，窗口变小，两个物体相互滑动，响应处理，完全改变屏幕大小的布局。

我希望这两个对象彼此保持固定的宽度，同时在页面上居中。

我知道如果不改变绝对定位，这可能是不可能的，即使我想保留垂直定位，我想我会接受任何解决方案，并废弃100％高度设计。我已经仔细考虑了10个不同的问题，这些问题在这里似乎是一回事，但没有一个答案对我有用。

Answer 1

试试这个Fiddle

CSS：

    body {
        background: none repeat scroll 0 0 #666;
        height: 95%;
    }

    .background {
        position: absolute;
        text-align: center;
        top: 30%;
        width: 90%;
    }

    .circle {
        background: none repeat scroll 0 0 red;
        border: 2px solid #fafafa;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        display: inline-block;
        height: 100px;
        width: 100px;
    }

    .rectangle {
        background: none repeat scroll 0 0 blue;
        display: inline-block;
        height: 50px;
        width: 200px;
    }

Answer 2

使用左：50％;和边距左边给出一定偏离中心。例如，您希望它们之间有200像素。

.circle {
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -200px; 
}

边距-200来自100的圆宽+ 100，相差200px的一半。

对于矩形：

.rectangle {
  width: 200px;
  position: absolute; 
  left: 50%;
  margin-left: 100px;
}

这将使它们之间的差距居中。如果要将总数居中，则应减去两个对象之间的宽度差除以边距的2（25px）。

Answer 3

我会将两个形状都包装到一个容器中，因为形状有固定的大小，所以很容易计算出这个容器的高度和宽度（在你的例子中为344x104）。

然后你必须使用以下方法将容器放在背景的中心：

    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    position:absolute;

并且形状不需要绝对位置，只需要一个浮点来保持它们相同的线。

希望这很清楚。这里有一个FIDDLE。检查出来

编辑：顺便说一下，要使高度：100％有效，你需要为所有父元素添加高度：100％

如何保持两个div彼此固定的宽度并居中？

3 个答案: