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

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

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 3

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>

Answer 4

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

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