Button at the center and bottom of div

Question

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

Here's my code: http://jsfiddle.net/3QguR/1/

HTML

<div class='Center' align='center'>
    <button class='btn-bot'>button-bottom</button>
</div>

CSS

.Center{
    width:200px;
    height:200px;
    background:#0088cc;
    margin:auto;
    padding:0%;
    position: relative;
    top: 0; left: 0; bottom: 0; right: 0;
    border-radius:5%;
}
.btn-bot{
    position: absolute;
    bottom: 0;

}

Answer 1

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 2

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 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;

Answer 4

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 5

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 6

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