上下中央ぞろえはどんな時に使う？
ログイン画面など、ページな中で、強調したいものが一つ決まっている時。
いろいろな実装方法
共通のhtml
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上下中央ぞろえ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chuuou">この要素が中央になる</div>
</body>
</html>
1. 親要素をdisplay:flexにすることで、子要素を中央ぞろえ
style.css
body {
min-height:100vh;//これは、bodyの高さを画面いっぱいに引き伸ばしている
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
}
2. 子要素のtop,left
これは、子要素の大きさが決まっている時だけ使える。
ここでは、子要素横縦300px幅500pxにしている。
style.css
body {
min-height:100vh;
position:relative;
/* 実は、bodyにこれをする必要はないが、親要素がbody以外の時にも対応できるように書いておく */
}
.chuuou {
width:500px;
height:300px;
position:absolute;
top: calc(50% - ( 300px / 2 ));/*50%は行き過ぎてしまうので、要素の縦の半分の長さ戻るようにする。*/
left: calc(50% - ( 500px / 2 ));
background-color:blue;/* 幅が設定されていることが分かりやすいように色を付けた */
}
3. 子要素のtop,leftとtransform
これは、子要素の大きさが決まっていなくても使える。
例えば、子要素がdisplay:inline-blockの時とか便利。
これは、https://qiita.com/yukinaka/items/1da62535553b62cc50aa
から引用。
cssで上下中央したいときに、この方のqiitaから、何度もコピペさせてもらっていた。
ここでは、子要素をinline-blockにしている。
これが結構実用性高そう。
もちろん、子要素の中に、複数の要素を入れても大丈夫。
style.css
body {
min-height:100vh;
position:relative;
/* 実は、bodyにこれをする必要はないが、親要素がbody以外の時にも対応できるように書いておく */
}
.chuuou {
position:absolute;
display:inline-block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
outline: 2px solid black;
padding: 10px 25px;
}