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 id="screensRow">

  <div class="screenOrientationContainer">
    <div class="overlapCentered">
      <div id="anotherElement"></div>
    </div>
    <div class="overlapCentered screenChecked">
      <div><i class="fa fa-check fa-4x" style="color: green;" aria-hidden="true"></i></div>
    </div>
  </div>

  <div class="screenOrientationContainer">
    <div class="overlapCentered">
      <div id="anotherElement"></div>
    </div>
    <div class="overlapCentered screenChecked">
      <div><i class="fa fa-check fa-4x" style="color: green;" aria-hidden="true"></i></div>
    </div>
  </div>

</div>

CSS

.screenOrientationContainer {
  width: 180px;
  height: 180px;
  position: relative;
  margin-right: 20px;
  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 red;
}

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

.screenChecked {
  z-index: 1;
}

#screensRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}