Button at the center and bottom of div - css

Question

How to make a button be at the bottom of div and at the center of it at the same time?
.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;
}
<div class=Center align='center'>
<button class='btn-bot'>Bottom button</button>
</div>

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

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

Answer 3

Does the button need to be absolutely positioned? If so, you could specify a width and then a negative left margin:
.btn-bot{
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
bottom:0px;
}
fiddle

Answer 4

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

Answer 5

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;

Answer 6

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 7

I used table-row to combine text and button in one container:
#out{
display:table;
position:absolute;
}
#out div#textContainer{
display:table-row;
}
#out div#text{
display:table-cell;
vertical-align:top;
}
#out div#buttonContainer{
display:table-row;
text-align:center;
}
#out div#button{
display:table-cell;
vertical-align:bottom;
}
CodePen

Answer 8

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">
The Button
</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:
Fiddle

Answer 9

You can use align-items: flex-end like so:
html,
body {
height: 100%;
}
.flex-container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.center {
width: 200px;
height: 200px;
background: #0088cc;
display: flex;
align-items: flex-end;
}
.btn-bot {
margin: 0 auto;
display: block;
}
<div class="flex-container">
<div class="center">
<button class="btn-bot">Bottom button</button>
</div>
</div>