Center the DIV in DIV

Question

Hello i have a next html code and 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>

I have 2 problems:

1) I cannot find an apropriate solution to center the .menuButtonContent, it is centered horizontaly, but not vertically, on some screen sizes it gets centered vertically, but not at all - how can i center it?

2) The background-image: url doesn't get rendered, why?

Answer 1

To make an element vertically align centered, set the display property of the parent element as display:table; then set the element that has to be centered as display:table-cell; and vertical-align:midlle;.

.parent{
    display:table;
}

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

Answer 2

Try using the calc() function in CSS

lets say the parent div is called "a" and its child was "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

first set the display of child divs to inline-block

then set the parent text-align to center. This will horizontally center your divs

and then use a "hack" to accomplish vertically aligning your child divs. See this fiddle for an example