Question

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

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

您可以使用display: table-cell和vertical-align: bottom来实现此目的，但您需要将容器div设置为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 3

这样做的一种方法是给它一个绝对宽度，然后是它的一半：

width: 250px;
margin-left: -125px;

另一种方法是给div以下行高并删除button中的所有样式：

line-height: 398px;

Answer 4

按钮是否需要绝对定位？如果是这样，您可以指定宽度，然后指定负左边距：

.btn-bot{
    position: absolute;
    left: 50%;
    width: 100px;
    margin-left: -50px;
    bottom:0px;
}

fiddle

Answer 5

例如，如果您有绝对位置，请写如下：

.btn-bot{
   position:absolute; 
   margin-left:-50px;
   left:50%;
   width:100px;
   bottom:0px;
}

注意：给出按钮宽度的左半部分。

JSFiddle demo

Answer 6

我使用table-row将文本和按钮合并到一个容器中：

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

我知道很久以前就已经回答了这个问题，但我无法在父容器上使用display：table，所以我必须找到另一种方法。

事实证明这很好用：

.container{
    position:absolute;
}
.button{
    position:absolute;
    bottom: 5px;
    left: 0%;
    right: 0%;
    text-align: center;
}

修改：如果您的按钮为<div>，则不适用于实际<button>

Answer 8

这对我有用，我认为这是几个人试图达到的目标。只需使用全宽包装div并将按钮居中放置即可。

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

结果：

Fiddle

Answer 9

您可以像这样使用align-items: flex-end：

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>

按钮位于div的中心和底部

9 个答案: