<p>子要素がdisplay: block;の要素</p>
<div class="parent">
  <div class="block"></div>
</div>
<p>子要素がdisplay: inline;の要素</p>
<div class="parent">
  <a class="inline">リンク</a>
</div>
.parent {
  display:flex;
  /* 水平方向中央寄せ */
  justify-content: center;
  /* 垂直方向中央寄せ */
  align-items: center;
 
  width: 100%;
  height: 100px;
  background: lightyellow;
}
.block {
  background: lightskyblue;
  width: 100px;
  height: 50px;  
}
.inline {
  background: lightpink;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.