- 最終更新日
- 記事公開日
【最新版】最もシンプルにdiv内の中央（縦方向）に要素を配置する方法
divの中央にテキストを配置したいんだけど、たくさんの方法が紹介されててどれが一番いいのか分からない・・・
今、一番最新のやつで一番シンプルな方法を教えて！
了解です！
こちらになります↓
div.outer {
display:flex;
}
div.inner {
margin:auto;
}<div class="outer">
<div class="inner">テキスト</div>
</div>flexを使う方法はシンプルなコードで書けますが、divの中に複数の要素があるときには使えません。
念のため、positionを使った方法も紹介しておきますね（※HTMLのコードは同じです）
div.outer {
position:relative;
width:100%;
height:100%;
}
div.inner {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}<div class="outer">
<div class="inner">テキスト</div>
</div>