屏幕底部中心的引导按钮

【问题标题】：Bootstrap button bottom center of the screen屏幕底部中心的引导按钮
【发布时间】：2021-06-17 15:25:58
【问题描述】：

我是引导程序和学习新事物的新手，我正在尝试将引导程序按钮带到屏幕中心的底部位置，到目前为止我的代码是

.bottom-center {
  position: absolute;
  bottom: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<p>Just a test of placing the button in center of the screen at bottom position</p>
<div class='bottom-center'>
  <button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</div>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-3

【解决方案1】：

不需要任何额外的 CSS 来实现这一点。

第一件事：使用 bootstrap 4 而不是 3。（bootstrap 3 太旧了）
将fixed-bottom 类添加到按钮容器中，使其位于屏幕底部。
在按钮容器中添加d-flex justify-content-center，使其居中

在引导程序here 中阅读有关 flex 属性的更多信息

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p>Just a test of placing the button in center of the screen at bottom position</p>
<div class="fixed-bottom d-flex justify-content-center">
  <button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</div>

【讨论】：