Q:

Button at the center and bottom of div

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>

A:

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. 

A:

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

A:

One way of doing this would be to give it an absolute width and then a margin half of that:
width: 250px;
margin-left: -125px;

Another way would be to give the div the following line-height and remove all styles from the button:
line-height: 398px;

