Button at the center and bottom of div

Question

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

.Center {
  width: 200px;
  height: 200px;
  background: #0088cc;
  margin: auto;
  padding: 2%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.btn-bot {
  position: absolute;
  bottom: 0px;
}

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

Answer 1

Give the parent element…

display: table; text-align: center;

…and its child element…

display: table-cell; vertical-align: bottom;

This way you do not need to know the width of the child element in case it changes, thus requiring no negative margins or workarounds.

Answer 2

For example write like this if you have position absolute:

.btn-bot{
   position:absolute; 
   margin-left:-50px;
   left:50%;
   width:100px;
   bottom:0px;
}

Note: give margin-left half of the width of the button.

JSFiddle demo