div中心和底部的按钮答案

【问题标题】：Button at the center and bottom of divdiv中心和底部的按钮
【发布时间】：2014-04-05 10:24:24
【问题描述】：

如何让一个按钮在div的底部和中心同时出现？

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

【问题讨论】：

jsfiddle.net/3QguR/3
您不应将align 用作div 的属性。在 HTML5 中，div 标记上的此属性已过时：developer.mozilla.org/en-US/docs/Web/HTML/Element/div 请改用 css text-align: center;。
stackoverflow.com/questions/5817233/… 是您正在寻找的答案

标签： css html button

【解决方案1】：

给父元素…

display: table; text-align: center;

…及其子元素…

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

这样您就不需要知道子元素的宽度以防它发生变化，因此不需要负边距或变通方法。

【讨论】：

【解决方案2】：

例如，如果你有绝对位置，就这样写：

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

注意：留出按钮宽度的一半。

JSFiddle demo

【讨论】：

您需要它，因为如果您不使用它并更改宽度，那么在这种情况下它将失败。看到这个：jsfiddle.net/3QguR/18。因此，要使示例在所有情况下都能正常工作，您需要使用它。
当我将它添加到您失败的示例中时，什么也没有发生。
糟糕，我忘记了自己的观点："give margin-left half of the width of the button." 更新链接：jsfiddle.net/3QguR/21。您还需要left:50% 才能支持 Internet Explorer。

【解决方案3】：

您可以使用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

【讨论】：

看起来很有趣，但我需要一些 div 顶部的内容

【解决方案4】：

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

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

另一种方法是为div 提供以下行高并从button 中删除所有样式：

line-height: 398px;

【讨论】：

CSS 不应该包含负值！！
@PratikJoshi 这是错误的。它们不应该被过度使用，但是在很多情况下负值是可以接受的——不要相信我的话coding.smashingmagazine.com/2009/07/27/…和stackoverflow.com/a/4990026/1592764

【解决方案5】：

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

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

fiddle

【讨论】：

不管怎么定位。目标是让按钮位于底部。

【解决方案6】：

我知道很久以前就已经回答了这个问题，但我无法在父容器上使用 display:table，所以我不得不另谋出路。

事实证明这很好用：

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

编辑：如果您的按钮是<div>，则此方法有效，而不是实际的<button>

【讨论】：

【解决方案7】：

我使用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

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：