Bootstrap3で手軽に上下中央揃えを実現する

前提として

• Slim
• Sass
• Compass

を使っています。古いIEでの細かいレイアウトなどは目をつぶっています。

Bootstrapで上下中央揃えできない..

BootstrapのGridは便利ですが、ちょっと凝ったレイアウトになると、途端に実装どうしようとなりがちですよね。
その１つが上下中央揃えだと思っています。

以下の様に書いても上下中央揃えならない！table-cell使う？と悩んでしまいがちです。

.row
  .col-xs-6 // 真ん中にならない。。
  .col-xs-6

そういう時は flexを使いましょう。

以下のコードを追加します。

_bootstrap_and_overrides.sass

.row
 &--flex
   +display-flex
   > *
    +align-self(center)

これだけで上下中央揃えが実現できます！

レスポンシブも対応したいんだけど？これだと縮めた時に回りこまなくない？

ごもっともですね。

以下のようにメディアクエリを使うmixinを登録して、指定の幅以下になったときはdisplay: blockにするようにしましょう。

_mixin.sass

// メディアクエリ
$bootstrap_bp_md: 1199px
$bootstrap_bp_sm: 991px
$bootstrap_bp_xs: 767px

=mq($bp)
  @if $bp == md
    @media screen and (max-width: $bootstrap_bp_md)
      @content
  @else if $bp == sm
    @media screen and (max-width: $bootstrap_bp_sm)
      @content
  @else if $bp == xs
    @media screen and (max-width: $bootstrap_bp_xs)
      @content
  @else
    @media screen and (max-width: $bp)
      @content

_bootstrap_and_overrides.sass

.row
 &--flex
   +display-flex
   &--md
     +mq(md)
       display: block
   &--sm
     +mq(sm)
       display: block
   &--xs
     +mq(xs)
       display: block

実際には

.row.row--flex.row--flex--sm

のようにつかいます。

こんな感じで手軽に実装できました。(display: blockにしているところはflexでもっと綺麗にかけるような気がしています)

おわりに

Bootstrap4からはflexが実装されるみたいなので、上のようなコードは不要かもしれません。
とはいえ、しばらくBootstrap3なこともあり、わりかし重宝しています。かゆいところに手が届きます。
参考になれば幸いです。