div 内の水平・垂直方向の中央揃え

方法1

transform を使用して div を中央に配置するには、まず位置を設定します。
css

.outer {
   width: 500px;
   height: 200px;
   background-color: green;
   position: relative;
        }

.inner {
   width: 20px;
   height: 10px;
   background-color: wheat;
   position: absolute;
}
.center {
   left: 50 %;
   top: 50 %;
   transform: translate(- 50 %, - 50 %);/* own 50% */
}

html

<div class="outer">
    <div class="inner center"></div>
</div>

方法2

margin: auto;を使って、最初に位置決めをする。

css

.outer {
  width: 500px;
  height: 200px;
  background-color: green;
  position: relative;
}

.inner {
  width: 20px;
  height: 10px;
  background-color: wheat;
  position: absolute;
}
.center {
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}

html

<div class="outer">
    <div class="inner center"></div>
</div>

方法3

display:flexでdivを中央寄せにする
css

.flex{
	display:flex;
    align-items: center;
	justify-content:center;
	width:500px;
	height:500px;
    border:10px solid;
	}
.flex_son{
	width:100px;
	height:100px;
	border:10px solid;
}

html

<div class='flex'>
	<div class="flex_son"></div>
</div>

メソッド4

これは、おそらく最も一般的な方法で、divの絶対配置を使用して水平および垂直方向のセンタリングを行います[margin negative spacing]。

.outer {
    width: 500px;
    height: 500px;
    position: relative;
    background:red;
}
.center{
    width:200px;
    height: 200px;
    background:green;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-100px;// half of the width
    margin-top:-100px;
}

<div class="outer">
    <div class="center"></div>
</div>

メソッドファイブ

親ボックスを table-cell 要素に設定し、text-align:center と vertical-align:middle で水平方向と垂直方向の中央揃えにすることができます。
子要素はinline-blockに設定されています。

Aa{
    display: table-cell;
    text-align:center;
    vertical-align: middle;
    width: 500px;
    height: 500px;
    background:green;
    
}
.aa{
    display: inline-block;
    background:red;
    width: 100px;
    height: 100px;
}
<div class="Aa">
    <div class="Aa"></div>
</div>

方法6

親ベースラインを擬似要素 :before で vertical-align:middle で揃える。

<style type="text/css">
  .parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    font-size: 0;
    background: #798456;
    text-align: center;
  }
  .parent:before {
    display: inline-block;
    width: 20px;
    height: 100%;
    content: '';
    background: #132456;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #19be6b;
    vertical-align: middle;
  }
</style>

<div class="parent">
  <div class="child">child</div>
</div>

方法（ウィンドウを中央化する）

vw,vhを使用して実現
vwは可視ウィンドウの幅の単位で、パーセンテージに少し似ていて、1vw=可視ウィンドウの幅の100分の1です。例えば、ウィンドウの幅のサイズが1800pxの場合、1vw = 18pxです。パーセンテージとは異なり、vwは常に可視ウィンドウの幅に対して相対的であり、パーセンテージはその親要素の幅に関連します。
height + margin-top + margin-bottom = 100、width + margin-left + margin-right = 100となるようにmarginの上下の間隔を設定するだけで、縦方向の中央寄せに対応することができるようになります

#aa { 
  width: 50vw; 
  height: 50vh; 
  margin: 25vh auto; 
  /*margin: 25vh 25vw; */ 
}
 	
<div id="aa"></div>