heightをとった要素に文字を入れると文字の縦位置は左上揃えになる。
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;
}実装後
ぜひ参考にしてみてください。
インスタでHTML,CSSの小技を配信中
