<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
color: white;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>完璧なセンタリング</h1>
<p>justify-contentプロパティとalign-itemsプロパティの両方が<em>center</em>に設定されているフレックスコンテナは、アイテムを中央(両方の軸)に配置します。</p>
