Center the DIV in 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属性设置为display:table;，然后将必须居中的元素设置为display:table-cell;和vertical-align:midlle;。

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

Answer 2

尝试在CSS中使用calc()函数

假设父div命名为"a"其子div命名为"b"

<div id="a" style="width:400px;height:400px;position:relative;">
     <div id="b" style="position:relative;top:calc(25% - 100px);left:calc(25% - 100px);width:50%;height:50%;"></div>
</div>

Answer 3

首先将子div的display设置为inline-block

则将父text-align设置为center。这将使div

水平居中

，然后使用"hack"来完成垂直对齐您的子div。查看下面的示例