Button at the center and bottom of div

Question

How to make button be at the bottom of div and at the center of it at the same time?

Here's my code: http://jsfiddle.net/3QguR/1/

HTML

<div class='Center' align='center'>
    <button class='btn-bot'>button-bottom</button>
</div>

CSS

.Center{
    width:200px;
    height:200px;
    background:#0088cc;
    margin:auto;
    padding:0%;
    position: relative;
    top: 0; left: 0; bottom: 0; right: 0;
    border-radius:5%;
}
.btn-bot{
    position: absolute;
    bottom: 0;

}

Answer 1

You can use display: table-cell and vertical-align: bottom to achieve this, although you need a container div set to display: table.

HTML

<div class="boxContainer">
    <div class="box">
        <button>Bottom button</button>
    </div>
</div>

CSS

.boxContainer {
    display: table;
}
.box {
    width: 200px;
    height: 200px;
    background: #0088cc;
    padding: 2%;
    display: table-cell;
    text-align: center;
    vertical-align: bottom;
}

Demo

Answer 2

I know this has been answered a long time ago, but I couldn't use display:table on the parent container so I had to find another way around.

It turned out that this worked just fine:

.container{
    position:absolute;
}
.button{
    position:absolute;
    bottom: 5px;
    left: 0%;
    right: 0%;
    text-align: center;
}

Edit: This works if your button is a <div>, not for an actual <button>