javascript - 将 DIV 居中放置在 DIV 中

Question

你好，我有下一个 html 代码和 CSS:

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.teaser {
  width: 100%;
  height: 25vh;
  background-image: url("http://www.1zoom.me/big2/365/321125-alexfas01.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
a.menuButton {
  padding: 0;
  margin: 0;
  width: 49.7%;
  height: 33.33%;
  float: left;
  background-color: white;
  border-collapse: collapse;
  border: 1px solid #E6F0F0;
  text-decoration: none;
  position: relative;
  color: black;
}
.rectangle {
  padding: 0;
  width: 70px;
  height: 7px;
  background: blue;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.menuButtonContent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  height: 50%;
  width: 50%;
  background-color: red;
  margin: auto;
}
.menuButtonContent h1 {
  text-align: center;
}
.buttonsWrapper {
  width: 100%;
  height: 73vh;
}
.rectangle#citizenship {
  background-color: #38CCBA;
}
.rectangle#fastsearch {
  background-color: #00899B;
}
.rectangle#forillegals {
  background-color: #D80C00;
}
.rectangle#soonillegals {
  background-color: #FF8A00;
}
.rectangle#aboutapp {
  background-color: #B8B8B8;
}
.rectangle#settings {
  background-color: #626262;
}

<div class="teaser"></div>
<div class="buttonsWrapper">
  <a class="menuButton" href="#">
    <div class="menuButtonContent">
      <h1>Citizenship</h1>
      <div class="rectangle" id="citizenship"></div>
    </div>
  </a>
  <a class="menuButton" href="#">
    <div class="menuButtonContent">
      <h1>Fast search</h1>
      <div class="rectangle" id="fastsearch"></div>
    </div>
  </a>
  <a class="menuButton" href="#">
    <div class="menuButtonContent">
      <h1>For illegals</h1>
      <div class="rectangle" id="forillegals"></div>
    </div>
  </a>
  <a class="menuButton" href="#">
    <div class="menuButtonContent">
      <h1>Soon illegals</h1>
      <div class="rectangle" id="soonillegals"></div>
    </div>
  </a>
  <a class="menuButton" href="#">
    <div class="menuButtonContent">
      <h1>About app</h1>
      <div class="rectangle" id="aboutapp"></div>
    </div>
  </a>
  <a class="menuButton" href="#">
    <div class="menuButtonContent">
      <h1>Settings</h1>
      <div class="rectangle" id="settings"></div>
    </div>
  </a>
</div>

我有两个问题:

1) 我找不到使 .menuButtonContent 居中的合适解决方案，它水平居中，但不是垂直居中，在某些屏幕尺寸上它垂直居中，但根本不是 - 我如何才能居中？

2) background-image: url 没有被渲染，为什么？

Answer 1

要使元素垂直居中对齐，请将父元素的显示属性设置为 display:table; 然后将必须居中的元素设置为 display:table-cell; 和 vertical-align:midlle;。

.parent{
    display:table;
}

.child-element-centered{
   display:table-cell;
   vertical-align:midlle;
}