<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.