Button at the center and bottom of div

Question

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

Answer 1

You can use display: table-cell and vertical-align: bottom to achieve this, although you need a container div set to display: table.

HTML

    

        Bottom button
    

CSS

.boxContainer {
    display: table;
}
.box {
    width: 200px;
    height: 200px;
    background: #0088cc;
    padding: 2%;
    display: table-cell;
    text-align: center;
    vertical-align: bottom;
}

Demo