heightをとった要素に文字を入れると文字の縦位置は左上揃えになる。
![](https://i0.wp.com/community-world.site/wp-content/uploads/2022/08/スクリーンショット-2022-08-12-12.33.44.png?resize=263%2C257&ssl=1)
flexboxで真ん中に配置する
flexboxの三行を使うだけで、要素内で文章を真ん中配置できる。
こちらは、2行以上の真ん中配置にも対応している。
<div class="box1">
文章文章<br>文章文章
</div>
.box1 {
width: 300px;
height: 300px;
background: #f00;
color: #fff;
/* ここから下の記述が真ん中配置の記述 */
display: flex;
justify-content: center;
align-items: center;
}
実装後
![真ん中配置の要素](https://i0.wp.com/community-world.site/wp-content/uploads/2022/08/スクリーンショット-2022-08-12-12.38.47.png?resize=362%2C359&ssl=1)
ぜひ参考にしてみてください。
インスタでHTML,CSSの小技を配信中