Question

我的问题是我希望将两个div并排拆分（50％宽度）。在它们内部，我想放置另一个div并使它们同时垂直和水平对齐。我认为可以在没有JS的情况下制作它，但我无法做到这一点。任何人都可以将我的两个圆圈放在他们的父DIV的中心（V，H），它们是宽度的50％和高度的100％，这样当我调整窗口大小时，圆圈将始终位于中心（并且旁边）现在一边）？

这是我的代码：

<div id="container">
  <div class="left">
    <div class="kolo1">
        sometext1
    </div>
  </div>
  <div class="right">
    <div class="kolo2">
       sometext 2
    </div>
  </div>
</div>

这是一个JSFiddle：http://jsfiddle.net/m5LCx/

先谢谢你解决我的任务：）

Answer 1

实际上非常简单，您只需要模拟类似表格的行为：

HTML标记：

<div id="container">
    <div> 
        <div class="half left">
            <div class="circle">hello</div>
        </div>
        <div class="half right">
            <div class="circle">world</div>
        </div>
    </div>
</div>

CSS样式：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#container {
    display: table;
    width: 100%;
    height: 100%;
}

#container > div {
    display: table-row;
}

.half {
    display: table-cell;
    width: 50%;

    text-align: center;
    vertical-align: middle;
}

.half.left {
    background: red;
}

.half.right {
    background: blue;
}

.circle {
    display: inline-block;
    padding: 50px;

    border-radius: 50%;
}

.half.left .circle {
    background: blue;
}

.half.right .circle {
    background: red;
}

最终结果http://jsfiddle.net/m5LCx/11/：

result

Answer 2

在这里工作http://jsfiddle.net/3KmbV/

在.left和.right类中添加position: relative，然后在margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0;和.kolo1类中添加.kolo2。并从.left类

中删除顶部位置

试试吧

body {
    background-color: #006666;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    font-size: 62.5%;
}
#container {
    width: 100%;
    min-height: 100%;
    height: 100%;
    position: absolute;
}
.left {
    width: 50%;
    min-height: 100%;
    float: left;
    top: 0;
    background-color: #660066;
    position: relative;
}
.right {
    width: 50%;
    min-height: 100%;
    float: right;
    min-height: 100%;
    background-color: #003366;
    position: relative;
}
.kolo1 {
    background-color: #0f0;
    width: 10em;
    height: 10em;
    border-radius: 5em;
    line-height: 10em;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.kolo2 {
    background-color: #00f;
    width: 10em;
    height: 10em;
    border-radius: 5em;
    line-height: 10em;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Answer 3

Another fiddle。这个使用带有负边距的绝对定位来确保圆圈始终位于中心。 CSS看起来像这样

.kolo1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5em; /* this must be half of the width */
  margin-top: -5em; /* this must be half of the height */
}

正如@Tushar指出的那样，您还需要将父元素的位置设置为相对。

Answer 4

您可以将postion: relative提供给.left和.right。

并将以下CSS提供给.kolo1和.kolo2

 margin: -5em 0 0 -5em;
    position: absolute;
    left: 50%;
    top: 50%;

Updated demo

Answer 5

Working Fiddle

.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}

.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}

Answer 6

尝试为父padding-top:50%添加div（包含课程left和right）

如何在div中居中（V，H）div

6 个答案: