如何在容器中垂直居中按钮答案

【问题标题】：How to vertically center a button in a container如何在容器中垂直居中按钮
【发布时间】：2019-07-26 16:35:48
【问题描述】：

如何在盒子容器中垂直居中我的视图按钮。

我尝试使用vertical-align:center; 设置按钮的样式，但没有成功。

我尝试添加：position: relative; top: 50%; transform: perspective(1px) translateY(-50%);。

但这只是让按钮的一半出现在容器顶部，另一半出现在容器内

查看：

<div class="container signup2">
<div class="title container">
  <h2> Enrolled Courses: </h2>
</div>
<div class="container box">
  <div class="row col-centered">
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 index">
      <h3><%= course.name %></h3>
      <p><%= course.description %></p>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
      <%= link_to "View", course_path(course), class: "btn button buttonmargin align" %>
    </div>
  </div>
</div>
</div>

custom.scss：

.signup2 {
  margin-top: 120px;
}

.title {
  margin-bottom: 15px;
}

.box {
  background-color: #f7f7f7;
  margin-bottom: 20px;
}

.index {
  text-align: left;
}

.align {
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
}

.button {
  background-color: #20B2AA;
  color: white;
}

.buttonmargin {
  margin-left: 150px;
}

This is how it looks like

【问题讨论】：

标签： css twitter-bootstrap flexbox

【解决方案1】：

尝试使用 flex。

<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 align"> //moved align class here
      <%= link_to "View", course_path(course), class: "btn button buttonmargin" %>
    </div>

align 的 css ：

.align {
  display: flex;
  justify-content: center;
  align-items: center;
}

这里是代码框link

【讨论】：

@subham Verma 我试过了，但现在我的按钮固定在容器的顶部，就像我将 align 更改为 translateY(-50%) 之前一样。
我还不明白。可以做这个代码沙箱或者截图供参考吗？
我的意思是，在我添加了您发送给我进行对齐的 css 后，查看按钮固定在容器的顶部。在我添加之前，按钮的一半在容器上方，另一半在容器内部。
我在使用您的建议后编辑了帖子以添加它现在的样子
我在我的代码中没有看到它。你能更新这个并在这里分享链接吗？？codesandbox.io/s/hidden-field-1wwn7

【解决方案2】：

Shubham 的回答几乎是正确的。但是，需要具有display:flex 属性的css 类实际上位于行本身上。 Bootstrap 4.0 没有修改 CSS，而是有一个名为 .d-flex 的内置类，您可以将其与 .align-items-center 配对，它会起作用。请参阅以下示例：

没有定义的高度属性：

<div class="container">
    <div class="row d-flex align-items-center">
        <div class="col-12">
            Anything in here will be vertically centered
        </div>
    </div>
</div>

在容器上定义高度属性：

<div class="container d-flex align-items-center" style="height:500px">
    <div class="row">
        <div class="col-12">
            Anything in here will be vertically centered
        </div>
    </div>
</div>

【讨论】：

我试过这样做，但按钮固定在容器的顶部，而不是在中间
从事物的声音来看，您已将定义的高度添加到您的类之一。如果有一个 height 属性，比如说容器类，你必须把 d-flex 和 align-items-center 放在上面（参见我编辑的代码）。