CSSでよく見られる要素を中央に配置する方法

水平方向中央
1.行内エレメントの場合、親エレメントにtext-align: center;を設定すると、行内エレメントを水平方向に中央に配置できます.

.box {
  text-align: center;
}

2.固定幅のブロックレベル要素について、この要素にmargin: 0 auto;を設定すると、ブロックレベル要素が水平方向に中央になる.

.box {
  width:80px;
  margin: 0 auto;
}

3.不定幅のブロックレベル要素については、子要素をinline-blockに設定し、親要素text-align:centerを設定すればよい

.container {
  text-align: center;
}
.box {
  display:inline-block;
}

4.css 3のflexboxレイアウトを使用して要素を水平に中央に配置します.

.box {
  display: flex;
  justify-content: center;
}

垂直方向中央揃え
1.行内要素の場合は、line-heightとheightが一致するように設定します.

.box {
  height: 40px;
  line-height: 40px;
}

2.不定高さのブロックレベル要素の場合、親要素display:table;のサブ要素を設定し、css 2 tableレイアウトを使用して要素を垂直に中央に配置します.

.box {
  display: table-cell;
  vertical-align: middle;
}

3.固定高さのブロックレベル要素について、親要素position: relativeの子要素を設定し、絶対位置を使用して垂直方向中央に配置します.

.box {
  position: absolute;
  width: 500px;
  height: 500px;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -250px;
}

4.css 3のflexboxレイアウトを使用して、要素を垂直に中央に配置します.

.box {
  display: flex;
  align-items: center;
}

水平方向中央+垂直方向中央
1.flexレイアウト垂直水平中央

display: flex;
align-items: center;
justify-content: center;

2.アスペクト固定

.container {
   position: relative;
   width:100%;
   height:500px;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
}

3.縦横不定

.container {
  width:100%;
  height:500px;
  display:table;
  text-align: center;
}
.item {
  display: table-cell;
  vercial-align: middle;
}