要素を中央配置する方法まとめ

1) 横方向だけ中央

1-1. ブロック要素を中央（幅指定あり or max-width）

.box {
    width: 300px;
    margin-inline: auto;
}

※ margin: 0 auto; と同義。幅がなければ中央にならない点に注意。

1-2. インライン要素・インラインブロックを中央

.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

2) 縦方向だけ中央

2-1. Gridで中央

.parent {
    display: grid;
    align-items: center; /* 親に高さ必須 */
}

2-2. Flexで中央

.parent {
    display: flex;
    align-items: center; /* 親に高さ必須 */
}

3) 上下左右中央

3-1. Gridのplace-items: center

.parent {
    display: grid;
    place-items: center;
}

• 子が1つなら最小コード。複数子要素の場合は各子が中央に重なるので注意。

3-2. Flex

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

3-3. position + transform

.parent {
    position: relative;
}
.child {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

3-4. position + inset + margin

.parent {
   position: relative;
}
.child {
   width: 200px;
   height: 100px;
   position: absolute;
   inset: 0;
   margin: auto;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
}