Overlap and center multiple DIVs

by André Masson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="screenOrientationContainer">
  <div class="overlapedElement vcentered">
    <div class="anotherElement"></div>
  </div>
  <div class="overlapedElement vcentered screenChecked">
    <div><i class="fa fa-check fa-4x" style="color: green;" aria-hidden="true"></i></div>
  </div>
</div>

CSS

.screenOrientationContainer {
  width: 180px;
  height: 180px;
  position: relative;
  border: 1px solid #17191b;
  cursor: pointer;
  border-radius: 4px;
  background: #303030;
  background-image: -webkit-radial-gradient(#303030, #101010);
  background-image: -o-radial-gradient(#303030, #101010);
  background-image: -moz-radial-gradient(#303030, #101010);
  background-image: radial-gradient(#303030, #101010);
}

.anotherElement {
  width: 70px;
  height: 70px;
  border: 1px solid white;
}

.overlapedElement {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screenChecked {
  z-index: 1;
}

.vcentered {
  display: flex;
  justify-content: center;
  align-items: center;
}