要素を親要素に対して上下左右とも中央配置する方法を「[CSS]　要素を上下左右中央揃えする方法のまとめ」にまとめていますが、このページはbody要素に直接テキストや画像を上下左右とも中央配置する場合のもっとも簡単な方法です。

上下左右とも中央配置というと、親要素に「display:flex」を使ったり、子要素に「position:absolute」を使うものが最近では一般的ですが、body要素に配置する場合は、それよりも簡単かつ短いコードで済みます。

使うのは次のCSSの指定のみです。これだけで、上下左右のサイズや比率が変わっても上下左右ともに中央に配置されます。

CSSソース

body {
	text-align: center;
	line-height: 100vh;
	}

テキストを配置した場合

「text-align: center」で左右中央に配置、「line-height: 100vh」で、line-heightにviewportの高さの100%を指定することで、上下中央に配置されます。

● テキストを上下左右とも中央配置するサンプル → 「サンプル1」

画像を配置した場合

● 画像を上下左右とも中央配置するサンプル → 「サンプル2」

なお、両者ともmeyer-resetのreset.cssを使用しています。