1月15日開催!現年収非公開で企業からスカウトをもらってみませんか?PR

転職ドラフトでリアルな市場価値を測る。レジュメをもとに、企業から年収とミッションが提示されます。

2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

CSSでの中央配置の設定方法

Posted at

簡単に要素を中央に配置する方法を紹介したいと思います。

水平中央配置

方法1: text-align: center

インライン要素またはインラインブロック要素を親要素の中央に配置。

<div style="text-align: center;">
  <span>中央に配置</span>
</div>

方法2: margin: auto

ブロック要素に使用。親要素に display: block と width を指定。

<div style="width: 50%; margin: 0 auto; background: lightgray;">
  中央に配置
</div>

方法3: display: flex

Flexboxを使用して、子要素を水平中央に配置。

<div style="display: flex; justify-content: center;">
  <div>中央に配置</div>
</div>

垂直中央配置

方法4: line-height を使用

行の高さを親要素の高さに等しくし、テキストを垂直方向に中央配置。

<div style="height: 100px; line-height: 100px; text-align: center; background: lightgray;">
  中央に配置
</div>

方法5: display: table-cell

table-cell と vertical-align: middle を使用。

<div style="display: table; height: 100px; width: 100%; text-align: center;">
  <div style="display: table-cell; vertical-align: middle;">中央に配置</div>
</div>

方法6: Flexboxを使用

Flexboxの align-items: center を使用。

<div style="display: flex; align-items: center; height: 100px; background: lightgray;">
  <div>中央に配置</div>
</div>

水平および垂直中央配置(完全中央)

方法7: Flexboxを使用

justify-content: center と align-items: center を組み合わせる。

<div style="display: flex; justify-content: center; align-items: center; height: 100vh; background: lightgray;">
  <div>中央に配置</div>
</div>

方法8: position と transform を使用

絶対配置で中央を指定。

<div style="position: relative; height: 100vh;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    中央に配置
  </div>
</div>

方法9: margin を使用

絶対配置と margin: auto を組み合わせる。

<div style="position: relative; height: 100vh;">
  <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; height: 50px; background: lightgray;">
    中央に配置
  </div>
</div>
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address