Pythonメモ torinaブログ

このブログはDjangoとBootstrap4で作成されました
ソースコード

CSS、要素を高さ中央に配置する

プログラミング関連
約395日前 2016年2月28日13:29
左右中央は割りとよくあるのですが、垂直方向の中央に配置する方法は中々見ないのでメモ
私は以下のコードをよく使います。割と汎用的です。

.vcenter {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


参考
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
http://codepen.io/sebastianekstrom/full/kzEhe
http://stackoverflow.com/questions/27489426/vertically-center-responsive-image-in-a-bootstrap-column