CSS transformで中央寄せ

こんにちは。ましじめの田村です。
CSSの transformで中央寄せにしたいケースがありました。

その場合次の方法で実現できそうです。

<div class="item">
  <div class="item__body">
    <p>中央寄せ</p>
  </div>
</div>

.item{
  position: relative; 

  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin:1em auto 
}
.item__body{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);

  background-color: #ccc;
  padding: .5em;
}

以上「CSS transformで中央寄せ」でした。
CSS で中央寄せにしたい場合参考にしてみてください。

---