8

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>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
nuT707
  • 1,543
  • 4
  • 17
  • 27
  • 2
    http://jsfiddle.net/3QguR/3/ – Petah Mar 04 '14 at 03:57
  • 1
    You should not use `align` as an attribute of `div`. In HTML5 this attribute is obsolete on the div tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div Use the css `text-align: center;` instead. – 3dgoo Mar 04 '14 at 04:01
  • http://stackoverflow.com/questions/5817233/align-button-at-the-bottom-of-div-using-css is the answer you're looking for – Don Cheadle Oct 16 '15 at 16:00

9 Answers9

13

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.

cdcdcd
  • 1,612
  • 13
  • 18
9

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

Chankey Pathak
  • 21,187
  • 12
  • 85
  • 133
  • You need it, because if you don't use it and you alter the width, then in that case it will fail. See this: http://jsfiddle.net/3QguR/18/. So to make the example work in all situations you need to use it. – Chankey Pathak Mar 04 '14 at 07:18
  • when i add it to your failed example nothing happens. – nuT707 Mar 04 '14 at 12:37
  • Oops, I forgot my own point: `"give margin-left half of the width of the button."` Updated link: http://jsfiddle.net/3QguR/21/. Also you need `left:50%` to be able to support internet explorer. – Chankey Pathak Mar 04 '14 at 16:37
  • This worked for me but can you please explain why we're doing `margin-left: -50px`? How come it doesn't quite work without it? – Vayl Feb 15 '22 at 15:23
4

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

Marcatectura
  • 1,721
  • 5
  • 30
  • 49
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

3dgoo
  • 15,716
  • 6
  • 46
  • 58
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;
ced-b
  • 3,957
  • 1
  • 27
  • 39
  • CSS should never include Negative values!! – Pratik Joshi Mar 04 '14 at 03:59
  • 1
    @PratikJoshi that is wrong. They shouldn't be used to excess, but there are plenty of situations where negative values are acceptable - don't take my word for it http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/ and http://stackoverflow.com/a/4990026/1592764 – Marcatectura Mar 04 '14 at 04:05
1

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

mortalis
  • 2,060
  • 24
  • 34
1

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>

user1747281
  • 149
  • 1
  • 13
1

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:

enter image description here

Fiddle

Hunter Nelson
  • 1,707
  • 3
  • 20
  • 37
0

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>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98