Css 按钮位于div的中心和底部

如何使按钮同时位于div的底部和中心

.Center{
宽度：200px；
高度：200px；
背景#0088cc；
保证金：自动；
填充：2%；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
}
.btn机器人{
位置：绝对位置；
底部：0px；
}

底部按钮

一种方法是给它一个绝对宽度，然后再加上一半的边距：

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

另一种方法是为

div

指定以下行高，并从

按钮中删除所有样式：

line-height: 398px;

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

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

注：留出按钮宽度的一半

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

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

给父元素

display: table; text-align: center;

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

…及其子元素

display: table; text-align: center;

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

这样，您就不需要知道子元素的宽度，以防它发生变化，因此不需要负边距或解决方法
 您可以使用
display:table cell
和
vertical align:bottom
来实现这一点，尽管您需要将container div设置为
display:table

HTML

<div class="boxContainer">
    <div class="box">
        <button>Bottom button</button>
    </div>
</div>

我使用
表格行
将文本和按钮组合在一个容器中：

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

我知道这个问题很久以前就得到了回答，但我无法使用父容器上的display:table，因此我必须找到另一种解决方法

结果证明，这种方法效果很好：

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

编辑：如果你的按钮是一个
，而不是一个实际的
这对我来说是有效的，我想这是一些人试图达到的目的。
只需使用一个全宽度的包装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;
}


.外部{
位置：相对位置；
高度：200px；
宽度：500px；
背景颜色：浅绿色；
}
.内部按钮容器{
背景颜色：灰色；
位置：绝对位置；
底部：0；
右：0；
左：0；
文本对齐：居中；
}
a{
保证金：自动；
背景色：白色；
}

结果:


您可以这样使用：


html，
身体{
身高：100%；
}
.柔性容器{
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.中心{
宽度：200px；
高度：200px；
背景#0088cc；
显示器：flex；
对齐项目：柔性端；
}
.btn机器人{
保证金：0自动；
显示：块；
}

底部按钮
不应将
align
用作
div
的属性。在HTML5中，这个属性在div标签上是过时的：使用css
text align:center取而代之。是你想要的答案CSS永远不应该包含负值@这是错误的。它们不应该被过度使用，但在很多情况下，负面价值是可以接受的——不要相信我的话，不管如何定位它。我们的目标是使按钮位于底部。看起来很有趣，但我需要一些位于顶部的内容。您需要它，因为如果您不使用它，并且更改宽度，那么在这种情况下，它将失败。请参见：。因此，要使示例在所有情况下都能工作，您需要使用它。当我将其添加到失败的示例中时，什么都不会发生。哎呀，我忘记了我自己的观点：
“给按钮宽度的一半留边距。”
更新的链接：。您还需要
left:50%
才能支持internet explorer。