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

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.

Answer 2

I know this has been answered a long time ago, but I couldn't use display:table on the parent container so I had to find another way around.

It turned out that this worked just fine:

.container{
    position:absolute;
}
.button{
    position:absolute;
    bottom: 5px;
    left: 0%;
    right: 0%;
    text-align: center;
}

Edit: This works if your button is a <div>, not for an actual <button>

Answer 3

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;