按钮的垂直对齐[重复]答案

【问题标题】：Vertical alignment of button [duplicate]按钮的垂直对齐[重复]
【发布时间】：2017-12-14 20:20:09
【问题描述】：

您好，我创建了一个按钮。我给它引导以进行居中。现在我需要让该按钮垂直对齐到页面中心，没有边距和填充。我该怎么做？

HTML 如下所示

<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
    <button class="case-study-button">
      <a href="#"> CASE STUDY <span class="fa fa-angle-double-down"></span></a>
    </button>
  </div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

CSS 如下所示

/* without margin and padding */

.case-study-button {
  height: 61px;
  width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}

【问题讨论】：

你可以使用position:absolute，或者阅读.align-items-center
或translate()
bootstrap 4 支持flex
为什么不向我们发布您的“案例研究按钮”css？也许我们可以帮忙
明确一点，您希望它位于.row 的中间，而不管.row 的大小？

标签： html css bootstrap-4

【解决方案1】：

您可以将按钮绝对定位到 50%，然后使用 transform translate 使其居中。在按钮上使用固定宽度可能会导致响应性问题。

.wrap {
  border: 1px solid black;
  height: 300px;
}

.case-study-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  height: 61px;
  max-width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4 wrap"><button class="case-study-button"><a href="#"> CASE STUDY <span class="fa fa-angle-double-down"></span></a>
                </button></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

【讨论】：

【解决方案2】：

You can set 'display:flex' to its parent div and 'align-items:center'.

.btnOuter{
  display:flex;
  align-items:center;
  height:500px
}
.case-study-button {
  height: 61px;
  width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
  <div class="btnOuter">
  <button class="case-study-button"><a href="#"> CASE STUDY <span class="fa fa-angle-double-down"></span></a></button>
    </div>            
  </div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

【讨论】：

【解决方案3】：

像这样更改 CSS 部分：-

.case-study-button {
  height: 10%;
  width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
  position:absolute;
  top:45%;
}

【讨论】：