要素をCSSで上下中央にピッタリ揃えたいと思っても、IEやSafariで若干ズレていたりしてモヤモヤ悩むことが多かったので、これを書いておけば大丈夫!というCSSを紹介します。
▼利用シーン
- トップページの<h1>メッセージ等を画面の上下中央に寄せる
- ページローディングのクルクルするやつを上下中央寄せる
HTML側の記述 -要素を上下中央寄せする-
まずは、親要素(wrap)と子要素(content)を用意します。
classよりもidで指定しておくと、あとでごっちゃにならないのでおすすめです。id名称はサイトに合わせて適当に変えてください。
CSS側の記述 -要素を上下中央寄せする-
次にCSS側の記述。以下のように記述すると、背景一面黒のど真ん中に白いボックスを配置できます。
▼適用イメージ
一応、それぞれのコードでどんなことを指定しているのかについて補足しておきます。
#wrap
background-color: #000;
背景色を真っ黒に指定。
height: 100vh;
黒部分の背景を画面いっぱいに表示しています。中身がないと100%では効かないので、vh(ブイハイト)で当ててます。
width: 100%;
横幅いっぱい100%で指定。
position: relative;
上下中央に要素を配置するために、親要素を基準位置としてposition: relative;でマーキングしています。
#content内
background-color: #fff;
上下中央寄せするコンテンツの背景色白を指定。
color: #333;
文字色、濃いグレーで指定。
height: 100px; width: 100px;
上下中央寄せするコンテンツの高さ、横幅の指定。
position: absolute;
親要素を基準に、子要素を絶対配置したいのでposition: absolute;を指定。
top: 50%;
要素の高さを親要素内で上から50%位置に指定。
left: 50%;
要素の高さを親要素内で左から50%位置に指定。
transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);
最終行のここがミソです。
最終行の記述なしでは微妙に子要素にズレが生じます。というのも、子要素自体が高さ、横幅100pxを持つのでその分を調整してあげないといけないからです。
というわけで、子要素の高さ、横幅の半分を打ち消すというコードをtransformで指定してあげます。webkit、mozは他の環境(IE/Safari)でも崩れないように補足して書いておくのが良いです。
transformを用いなくても、top: 50%; left: 50%;
とした記述部分をtop: calc(50% - 50px); left: calc(50% - 50px);
と変更しても上手くいきます。
calcを使用することで、あらかじめ子要素の高さ、横幅分を差し引いて計算してしまう方法です。
ただ、この方法を用いると、子要素の高さ、横幅が変更した際にいちいち変更する必要が生じるので美しくないコードです。また、calcが機能しない環境もあるので非推奨です。
最後に
IEやSafariはコーダー、エンジニアにとって大敵です。
意図しない部分で崩れて泣かされるケースが非常に多いので、上記のような崩れない記述方法をできる限りインプットして自分の文法として使い回しできるようにできると良いですね。
では、快適なコーディングライフを。