【CSS】position: absoluteの中央寄せ方法まとめ

`position: absolute`を適用した要素を、上下左右それぞれの中央寄せにする方法をまとめました。

## marginを使用する
### 上下左右中央
```css
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="BaxpjqN" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/BaxpjqN">
  abusolute-center1_margin</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 上下中央
```css
{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ExLXgBZ" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/ExLXgBZ">
  abusolute-center2_margin</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 左右中央
```css
{
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="NWMgRZV" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/NWMgRZV">
  abusolute-center3_margin</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Tips
#### insetを使用して一括指定する
上下左右中央寄せにするときに、毎回各方向を記述していると面倒ですし行数も増えてしまいます。
`inset`を使用することで、`top`, `right`, `bottom`, `left`を`margin`などのショートハンドと同じようにまとめて書くことができます。

https://developer.mozilla.org/ja/docs/Web/CSS/inset


```css
{
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  inset: 0 1; /* top:0 right:1 bottom:0 left:1 */
  inset: 0 1 2; /* top:0 right:1 bottom:2 left:1 */
  inset: 0 1 2 3; /* top:0 right:1 bottom:2 left:3 */
}
```

#### 中央から少しずらしたい時

```css:中央から右に100pxずらす
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100px;
  margin: auto;
}
```
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="MWGJyEX" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/MWGJyEX">
  Untitled</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## transformを使用する
### 上下左右中央
```css
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WNJRrLx" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/WNJRrLx">
  absolute-center_transform</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 上下中央
```css
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
```
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="RwygKRN" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/RwygKRN">
  absolute-center_transform2</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 左右中央
```css
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="GRdErjp" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/GRdErjp">
  absolute-center_transform3</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>