CSS3:サイズ不明でもどのような要素でも縦中央配置する

goto_jp 1,542views 更新:2014年9月18日
.class {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

自分自身を相対的にtopから50%の位置に配置し、transformで自身の高さの50%上にずらすことで中央配置を実現しています。

Sassならば下記のように短縮できますね。

.class {
  position: relative;
  top: 50%;
  @include transform(translateY(-50%));
}

参考元:http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません