Centratura elementi inline-box

by BennyBatt

HTML

<div class="vc_row2">
  <div class="vc_column">
    <div class="pulsante"></div>
  </div>
  <div class="vc_column">
    <div class="allSides"></div>
  </div>
  <div class="vc_column">
    <div class="circle"></div>
  </div>
  <div class="vc_column">
    <div class="circlePulse"></div>
  </div>
</div>

CSS

.vc_row2 {
  width: 100vw;
  height: 60vh;
  vertical-align: middle;
  border: 1px solid black;
}
.vc_column{
  width: 24%;
  height: 30vh;
  padding: 5vh 0;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  line-height: 30vh;
  border: 2px solid blue;

}
.pulsante{
   margin: 0 auto;
   display: block;
   width:150px;
   height:150px;
   border: solid 1px #555;
   background-color: #eed;
}
.allSides{
  margin: auto;
  width:150px;
  height:150px;
  border: solid 1px #555;
  background-color: #eed;
  border-radius:50%;
}
.circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 30px;
  height: 30px;
  border: 2px dotted orange;
  border-radius: 50%;
}
.circlePulse {
  width: 32px;
  height: 32px;
  background: #34FF4A;
  border-radius: 50%;
  position: relative;
}