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: 
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.
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;

```