More than 3 years have passed since last update.

position: fixed;で中央に揃える方法と、モーダル内の画像を縦最大に表示する

Last updated at 2020-12-06Posted at 2020-12-06

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ CSSの基礎知識が増える
・ position: fixed;で中央に揃える方法
・モーダル内の画像を縦最大に表示する

モーダルウィンドウを例に挙げますが、必要箇所のみ記述しています

index.haml

.modal
  = image_tag src="isara_full.png",class:"modal-height"

index.scss

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-height {
  height: -webkit-fill-available;
}

画像の高さと横幅に合わせて自動で中央に揃えてくれます。