在引导程序中垂直居中一组按钮

Question

我一直试图将按钮置于其父级div的中间，但不知道如何。我已经尝试添加margin: 0 auto和bootstrap的特殊类'center-block'但它似乎没有工作。我怀疑它可能与css的display:flex部分发生冲突，但除此之外，我不知道该怎么做。

这是问题的图片。

/*--CSS--*/

* {
  background-color: rgba(0, 0, 0, 0.1);
}

h1 {
  font-family: "Raleway", "sans-serif" !important;
}

h2 {
  font-family: "Raleway", "sans-serif" !important;
}

.page {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table_cell {
  text-align: center;
}


/*--Page1--*/

.title {}

#mainTitle {
  font-size: 8em;
  font-weight: 900 !important;
  letter-spacing: -3px;
  text-transform: uppercase;
}

#mainSub {}


/*--Button--*/

.introButtons {
  margin: 0 auto !important;
}

.buttonBox {}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="firstPage" class="page col-md-12">
  <div class="table_cell col-md-8">
    <div class="introButtons col-md-8">
      <div class="buttonBox col-md-3">
        <a href="#secondPage" class="btn center-block">Who Are We?</a>
      </div>
      <div class="buttonBox col-md-3">
        <a href="#thirdPage" class="btn">Our Projects</a>
      </div>
      <div class="buttonBox col-md-3">
        <a href="#fourthPage" class="btn">Our Team</a>
      </div>
      <div class="buttonBox col-md-3">
        <a href="#fifthPage" class="btn">Contact Us</a>
      </div>
    </div>
  </div>
</div>

Answer 1

解决方案1 ​​（如果您想更改HTML部分）

您可以使用bootstrap offset 类。有关 offset

的更多帮助

将 introButtons col-sm-8 替换为 introButtons col-sm-8 col-sm-offset-2

＆＃13;

＆＃13;

* {
  background-color: rgba(0, 0, 0, 0.1);
}

h1 {
  font-family: "Raleway", "sans-serif" !important;
}

h2 {
  font-family: "Raleway", "sans-serif" !important;
}

.page {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table_cell {
  text-align: center;
}

#mainTitle {
  font-size: 8em;
  font-weight: 900 !important;
  letter-spacing: -3px;
  text-transform: uppercase;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="firstPage" class="page col-md-12">
  <div class="table_cell col-md-8">
    <div class="introButtons col-sm-8 col-sm-offset-2">
      <div class="buttonBox col-md-3">
        <a href="#secondPage" class="btn center-block">Who Are We?</a>
      </div>
      <div class="buttonBox col-md-3">
        <a href="#thirdPage" class="btn">Our Projects</a>
      </div>
      <div class="buttonBox col-md-3">
        <a href="#fourthPage" class="btn">Our Team</a>
      </div>
      <div class="buttonBox col-md-3">
        <a href="#fifthPage" class="btn">Contact Us</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

解决方案2 （如果您想更改CSS部分）

只需在自定义css文件中添加以下css

即可

.introButtons.col-md-8 {
  margin: auto;
  float: none;
}

＆＃13;

＆＃13;

* {
  background-color: rgba(0, 0, 0, 0.1);
}

h1 {
  font-family: "Raleway", "sans-serif" !important;
}

h2 {
  font-family: "Raleway", "sans-serif" !important;
}

.page {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table_cell {
  text-align: center;
}

#mainTitle {
  font-size: 8em;
  font-weight: 900 !important;
  letter-spacing: -3px;
  text-transform: uppercase;
}


.introButtons.col-md-8 {
  margin: 0 auto;
  float: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="firstPage" class="page col-md-12">
  <div class="table_cell col-md-8">
    <div class="introButtons col-md-8">
      <div class="buttonBox col-md-3">
        <a href="#secondPage" class="btn center-block">Who Are We?</a>
      </div>
      <div class="buttonBox col-md-3">
        <a href="#thirdPage" class="btn">Our Projects</a>
      </div>
      <div class="buttonBox col-md-3">
        <a href="#fourthPage" class="btn">Our Team</a>
      </div>
      <div class="buttonBox col-md-3">
        <a href="#fifthPage" class="btn">Contact Us</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;