【最新版】最もシンプルにdiv内の中央（縦方向）に要素を配置する方法

divの中央にテキストを配置したいんだけど、たくさんの方法が紹介されててどれが一番いいのか分からない・・・

今、一番最新のやつで一番シンプルな方法を教えて！

了解です！

こちらになります↓

div.outer {
	display:flex;
}
div.inner {
	margin:auto;
}

<div class="outer">
	<div class="inner">テキスト</div>
</div>

SAMPLE

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>

SAMPLE