按钮位于div的中心和底部

Question

如何使按钮位于div的底部并同时位于它的中心？

这是我的代码: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

给父元素......

display: table; text-align: center;

......及其子元素......

display: table-cell; vertical-align: bottom;

这样,您不需要知道子元素更改时的宽度,因此不需要负边距或变通方法.

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