heightをとった要素に文字を入れると文字の縦位置は上揃えになる。
横位置は、text-align: center;で真ん中揃えにしている。
![](https://i0.wp.com/community-world.site/wp-content/uploads/2022/08/スクリーンショット-2022-08-12-11.50.33.png?resize=255%2C244&ssl=1)
heightと同じ高さでline-heightを入れる
line-heightをheightと同じ高さにすると、縦位置を要素の真ん中に配置できる。
※2行以上の場合はこの小技は使えない。
.box1 {
width: 300px;
height: 300px;
background: #f00;
text-align: center;
color: #fff;
/* line-heightをheightと同じ高さに */
line-height: 300px;
}
実装後
![](https://i0.wp.com/community-world.site/wp-content/uploads/2022/08/スクリーンショット-2022-08-12-11.57.50.png?resize=317%2C312&ssl=1)
インスタでHTML,CSSの小技を配信中