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?

.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">
            <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:

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>