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: 
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](http://jsfiddle.net/3QguR/12/)
This is what worked for me and I think is what several people were trying to get at. 
Just use a full width wrapper div with the button centered inside it.

```
<div class="outer">
        <div class="inner-button-container">
            <a href="#">The Button</a>
        </div>
    </div>

.outer{
  position:relative;
  height:200px;
  width:500px;
  background-color:lightgreen;
}
.inner-button-container{
  background-color:grey;
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  text-align:center;
}

a{
  margin:auto;
  background-color:white;
}

```

Result:

[![enter image description here](https://i.stack.imgur.com/nl5YX.png)](https://i.stack.imgur.com/nl5YX.png)

[Fiddle](http://jsfiddle.net/s157fa98/)