torinaブログ

DjangoとBootstrap4で作成したブログ
Python, Django, Kivy, Bootstrap, Apache等のメモです
ソースコード

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

HTMLとCSSとJavaScript CSS
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