レスポンシブに役立つCSS（1）縦横中心に置く
巷に溢れてますが、直感的にわかりずらいので書きます。htmlまるっとコピーして使えます。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CodingSample／センター合わせ</title>
<style type="text/css">
body, html {
/*ウインドウの余白をなくす*/
margin: 0;
padding: 0;
}
* { /*全て*/
box-sizing: border-box; /*線は内側に引く*/
}
.Box {
width: 100%; /*ウインドウ幅いっぱい*/
height: 100vh; /*ウインドウ高さいっぱい*/
border: #cc0000 solid; /*わかりやすいように赤線*/
border-width: 10px; /*線の太さ10ピクセル*/
}
.inBox {
display: inline-block; /*ブロック要素にする*/
position: absolute; /*Box（親要素）内の絶対位置*/
top: 50%; /*上から50%*/
left: 50%; /*左から50%*/
transform: translate(-50%,-50%);/*inBox（自身の位置）を戻す（横位置-50%,縦位置-50%）*/
border: #000000 solid; /*わかりやすいように黒線*/
border-width: 1px; /*線の太さ1ピクセル*/
padding: 50px; /*わかりやすいように余白50ピクセル*/
}
</style>
</head>
<body>
<div class="Box">
<div class="inBox">高さが任意の中に入っている要素</div>
</div>
</body>
</html>左右センターは相対地にしても良いけど、子要素・孫要素へのセンター揃えはどこかで戻さないと永遠に受け継がれる。コード自体は理解しやすい。
<style type="text/css">
body, html {
/*ウインドウの余白をなくす*/
margin: 0;
padding: 0;
}
* { /*全て*/
box-sizing: border-box; /*線は内側に引く*/
}
.Box {
width: 100%; /*ウインドウ幅いっぱい*/
height: 100vh; /*ウインドウ高さいっぱい*/
border: #cc0000 solid; /*わかりやすいように赤線*/
border-width: 10px; /*線の太さ10ピクセル*/
text-align: center; /*センターに合わせる*/
}
.inBox {
display: inline-block; /*ブロック要素にする*/
position: relative; /*Box（親要素）内の相対地位置*/
top: 50%; /*上から50%*/
transform: translateY(-50%);/*inBox（自身の位置）を戻す（縦位置y軸-50%）*/
border: #000000 solid; /*わかりやすいように黒線*/
border-width: 1px; /*線の太さ1ピクセル*/
padding: 50px; /*わかりやすいように余白50ピクセル*/
}
</style>よろしければ「スキ」をお願いしますm（_ _）m
この記事が気に入ったらサポートをしてみませんか？