.box {
border-radius: 4px;
border: 1px solid #E63E3E;
width: 300px;
height: 200px;
}
上記のHTMLを記載し、こちらを上下中央揃いにするCSSを記載していく。
Flexbox
/* Flexbox */
body {
height: 100%;
}
main {
display: flex;
justify-content: center;
align-items: center;
}
Transform
/* transform */
body {
position: relative;
}
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 100%);
}
絶対配置して上下中央を0
body {
height: 100%;
}
main {
position: relative;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
ネガティブマージン
body {
height: 100%;
}
main {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
}
まとめ
ブロック要素を上下中央揃いにするCSSの一覧でした。