<!-- 上下左右中央寄せ -->
<div class="box inset_vh">
<div class="box--item">
insetで<br>上下左右中央
</div>
</div>
<!-- 上下中央寄せ -->
<div class="box inset_v">
<div class="box--item">
insetで<br>上下中央
</div>
</div>
<!-- 左右中央寄せ -->
<div class="box inset_h">
<div class="box--item">
insetで<br>左右中央
</div>
</div>
.box {
position: relative;
}
.box--item {
position: absolute;
width: fit-content; /* widthの指定は必須 */
height: fit-content; /* heightの指定は必須 */
}
/* ===============
上下左右中央寄せ
==================*/
.inset_vh .box--item {
margin: auto;
inset: 0;
}
/* ===============
上下中央寄せ
==================*/
.inset_v .box--item {
margin: auto 0;
inset: 0 auto;
}
/* ===============
左右中央寄せ
==================*/
.inset_h .box--item {
margin: 0 auto;
inset: auto 0;
}
/* ===============
装飾のためのCSS
==================*/
.box {
background-color: #efefef;
height: 200px;
}
.box + .box {
margin-top: 40px;
}
.box--item {
background-color: #2eb7cf;
color: #fff;
font-weight: bold;
padding: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.