Button at the center and bottom of div
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.
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
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