Question

我有一个宽度为80％的div，另一个有20％的div。第一个div有一个相对于它的另一个div位于顶部中间，我试图添加left: 50;但不工作

<div class="content">
   <div class="circle"></div>
</div>

这是JSFiddle

上的示例

Answer 1

您需要将left设置为calc(50% - 30px);，这将.circle水平居中。

+----------------------+--------------------+
|     30px -------·    ·                    |
|                  \ o · o                  |
|                 o |  ·    o               |
|                o<--->·     o              |
|                o     ·     o              |
|                ·o    ·    o·              |
|                ·   o · o   ·              |
|                ·     ·     ·              |
|                ·<---60px-->·              |
|                ·     ·                    |
|<--50% - 30px-->·     ·                    |
|                      ·                    |
|                      ·                    |
|<---------50%-------->·                    |
|                      ·                    |
+----------------------+--------------------+

Fiddle

.circle {
    width: 60px;
    height: 60px;
    position: absolute;
    top: -15px;
    left: calc(50% - 30px);
    right: 50%;
    background-color: #aaa;
    border-radius: 50%;
}

将.circle水平居中并垂直添加top: calc(50% - 30px)至.circle。

Fiddle

.circle {
    width: 60px;
    height: 60px;
    position: absolute;
    left: calc(50% - 30px);
    top: calc(50% - 30px);
    right: 50%;
    background-color: #aaa;
    border-radius: 50%;
}

Answer 2

将第二个div设置为使用＆＃34; auto＆＃34;左边距和右边距应该有效：

.circle {
    width: 60px;
    height: 60px;
    position: relative;
    top: -15px;
    margin: 0 auto;
    background-color: #aaa;
    border-radius: 50%;
}

JS Fiddle

Answer 3

将negative margin-left设置为width的{{1}}的一半

.circle

演示 - http://jsfiddle.net/Lw3hh7th/3/

Answer 4

制作.circle inline-block并给予适当的保证金。

.container {
    text-align:center;
}
.circle {
    margin:-15px auto 0 auto;
    display:inline-block;
}

See updated fiddle.

以响应性为中心的div位置

4 个答案:

Fiddle

Fiddle