html - How can I position a DIV in another DIV so the space above the DIV and below it is equal?

Question

I have the following HTML:

<div id="outer">
    <div class="content left"></div>
    <div class="content right">
       <div class="fill">
           <div class="blue">
             xxx <br> xxx
           </div> 
    </div>
</div>

CSS:

 body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; }
.content { position:absolute; width:50%; height:100%; }
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; }
.fill { padding: 2em; background-color: green; height: 100%;}
.blue { background-color: blue; }

Fiddle

How can I make it so the space above and below the blue DIV is the same height?

Answer 1

The following should work for you:

.blue { 
  position:absolute;
  top:50%;
  background-color: blue;
}

Here is a good reference for vertically aligning content Link

Answer 2

你问这个是因为你没有看到你所期望的，还是因为你不知道如何编程？我问这个是因为你忘了关闭“填充”DIV。

如果这不是您的问题，请尝试将位置分配给绝对。

.blue{
    position: absolute;
    background-color: blue;
    padding: 10px;
}