<div class="parent one">
  <div class="child">WITH MARGIN</div>
</div>

<div class="parent two">
  <div class="child">WITH FLEX</div>
</div>
.parent {
  width: 150px;
  height: 150px;
  float:left;
}

.child {
  display:inline-block;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 1.5em;
  text-align: center;
}

.parent.one {
  display:flex;
  background: blue;
}

.parent.one .child {
  margin:auto;
}

.parent.two {
  margin-left: 10px;
  display:flex;
  justify-content:center;
  background: red;
  align-items: center;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.