css - 如何在div中居中(V，H)div

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

其实很简单，你需要做的就是模拟一个类似表格的行为:

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>
   

2. 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/ :