设div为父div的50％高度

Question

I want the child div to be a 50% height of the parent, so if the parent div was 100%, the child div would be 50%, if the parent div was 1000px, the child div would still be 50%.

Here's a basic fiddle of what i've done so far http://jsfiddle.net/6PA6k/17/

Here's the html

<div class="wrapper">
  <div class="button-container">
    <div class="button"></div
  </div>
</div>

Here's the css

* {
  margin:0;
  padding:0;
}
html {
  height:100%;
  width:100%;
}
body {
  height:100%;
  width:100%;
}
.wrapper {
  height:100%;
  width:100%;
  background:red;
}
.button-container {
  height:100%;
  width:50px;
}
.button {
  width:50px;
  height:50px;
  background:blue;
}

Answer 1

UPDATED

Demo: http://jsfiddle.net/6PA6k/22/

* {
    margin:0;
    padding:0;
}
html {
    height:100%;
    width:100%;
}
body {
    height:100%;
    width:100%;
}
.wrapper {
    position: relative;
    height:80%;
    width:100%;
    background:red;
}
.button-container {
    position: relative;
    height:50%;
    width:300px;
    background:blue;
}
.button {
    position: absolute;
    top: 50%;
    height:50px;
    width:50px;
    background:yellow;
    margin-top: -25px;
}

Answer 2

I may be confused about what you are asking, but changing:

.button {
  width:50px;
  height:50px;
  background:blue;
}

To:

.button {
  width:50px;
  height:50%;
  background:blue;
}

Does what you seem to want... http://jsfiddle.net/c3eB8/

EDIT

Ok, so now that I understand the question better, in order to center the child div vertically with a parent div without fixed dimensions, you can use absolute positioning.

.button {
    width:50px;
    height:50px;
    background:blue;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Here is a fiddle: http://jsfiddle.net/8UjvB/

Answer 3

Maybe this: http://jsfiddle.net/helderdarocha/8p5MT/

It places the 50x50 button in the middle of the parent:

.button-container {
    height:100%;
    width:50px;
    background: green;
    position: relative;
}
.button {
    width:50px;
    height:50px;
    background:blue;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0;
}

(add position:relative to the parent, and margin:auto; position:absolute; top:0; bottom:0 to the .button statement)