テキストや画像など、要素の中央に寄せたいときはこんな方法でやる

2017年9月17日

  • table-cellを使う
  • テキストが1行の時
  • flexを使う

table-cellを使う

  1. <div class=”class”>
  2.  テキスト
  3. </div>
  1. .class {
  2.  display: table-cell;
  3.  vertical-align: middle;
  4.  height: 100px;
  5. }

自分ではあまり使わないかも

テキストが1行の時

  1. .class {
  2. line-height: 100px;
  3. }

これで高さ100pxの中央に配置される。

flexを使う

  1. .class {
  2.  display: -webkit-flex;
  3.  display: flex;
  4.  -webkit-align-items: center;
  5.  align-items: center;
  6. }

よく使う、ブラウザの対応に注意する必要がある。
Can i use でflexをチェック