ページ中央配置のHTML

CSS

コンテンツをページの中央配置する方法はいくつかあると思うが
代表的な方法を２つメモ。
position: absolute と margin: auto を指定する方法
HTML

<body>
<div class="center-content box">
   <h3>Center</h3>
</div>
</body>

CSS

body{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-size: calc(16px + 0.2vw);
   -webkit-text-size-adjust: 100%;
   font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
h1,h2,h3,h4,h5,h6,h7,h8{ margin: 0; }
.center-content{
   position: absolute;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
   margin: auto;
}
.box{
   background-color: #f5f5c6;
   width: 300px;
   height: 200px;
   display: flex;
   align-items: center;
   justify-content: space-around;
}

display: flex の枠で囲む方法
HTML

<body>
<section class="out-section">
	<div class="center-content box">
	   <h3>Center</h3>
	</div>
</section>
</body>

CSS ( body は ↑と同じ、）height: 100vh; を指定する

body{
   margin: 0;
   padding: 0;
}
.out-section{
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}
.center-content{
   background-color: #f5f5c6;
   width: 300px;
   height: 200px;
   display: flex;
   align-items: center;
   justify-content: space-around;
}

section が無くて body に直接、、
HTML

<body>
    <div class="center-content box">
         <h3>Center</h3>
     </div>
</body>

CSS

body{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-size: calc(16px + 0.2vw);
   -webkit-text-size-adjust: 100%;
   font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}
h1,h2,h3,h4,h5,h6,h7,h8{ margin: 0; }
.center-content{
   background-color: #f5f5c6;
   width: 300px;
   height: 200px;
   display: flex;
   align-items: center;
   justify-content: