html - 在已经垂直居中的元素内垂直居中元素

Question

我正在尝试将我的 .get-started-btn 在 Bootstrap 列中垂直居中。我认为问题可能是因为此按钮已经放置在带有 display: table-cell 的 div 中，所以我无法在另一个 table 中创建 table-cell -细胞？还有其他方法可以使按钮垂直居中吗？

看看我的 fiddle : JS Fiddle

<div class="page-wrap">
    <main>

      <div class="jumbotron" id="jumbotron">
        <div class="container">

          <div class="row">
            <div class="col-md-8">
              <h1 class="page-header">Flash <span class="page-header-label">Cards</span></h1>
              <p class="lead intro-text">
                Flash Cards is a simple solution for anyone trying to memorize new things or study for that next big test.
                Create your own personal deck of flash cards in minutes and we will track your results to ensure that
                you know your stuff.
              </p>
            </div>

            <div class="col-md-4">
              <div class="vcenter">
                <a href="#/getting-started" class="btn btn-lg btn-success get-started-btn">Get Started</a>
              </div>
            </div>
          </div> <!-- end row -->

        </div> <!-- end container -->
      </div> <!-- end jumbotron -->

    </main>
</div>

CSS

.page-wrap {
  width: 100vw;
  height: 100vh;
}
main {
  display: table;
  width: 100%;
  height: 100%;
}
#jumbotron {
  display: table-cell;
  vertical-align: middle;
  float: none;
}
.vcenter {
  display: table;
  height: 100%; /* does nothing */
  width: 100%; /*pushes element to new line */
  text-align: center;
}
.vcenter a {
  display: table-cell;
  vertical-align: middle;
  float: none;
}

Answer 1

很抱歉误解了您的问题。增加宽度后，我看到了两列。

您可以通过添加以下样式使按钮垂直居中:

.row {
  display: table-cell;
}

.vcenter a {
  position: relative;
  top: 50%;
  transform: translateY(-50%);}
}

Fiddle