CSS transformで中央寄せ

CSS

こんにちは。ましじめの田村です。
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 で中央寄せにしたい場合参考にしてみてください。

前の記事 次の記事

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートすることができます。

ご連絡おまちしています!

10万円からホームページ作成サービス

フレームワークをベースに柔軟なカスタマイズ&低価格で作成します。

サービスを詳しく見たい方へ