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

```css
.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;
}
```

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

Answer: 
Does the button need to be absolutely positioned? If so, you could specify a width and then a negative left margin:

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

```

[fiddle](http://jsfiddle.net/3QguR/8/)
You can use [`align-items: flex-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) like so:

```css
html,
body {
  height: 100%;
}

.flex-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  width: 200px;
  height: 200px;
  background: #0088cc;
  display: flex;
  align-items: flex-end;
}

.btn-bot {
  margin: 0 auto;
  display: block;
}
```

```html
<div class="flex-container">
  <div class="center">
    <button class="btn-bot">Bottom button</button>
  </div>
</div>
```