中央揃えの手法とその使う場面

# 中央揃えの手法とその使う場面
## 1　margin: auto;
### 何に対してmargin: auto;を適用させるか
中央揃えしたい要素
### 使う場面
中央揃えしたい要素が**ブロック要素**の時

**ただし、この中央揃えしたい要素にはしっかり幅を設定してあげておいてください**

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="kazuhito-nakayama" data-slug-hash="JjRbLVP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="margin: auto;">
  <span>See the Pen <a href="https://codepen.io/kazuhito-nakayama/pen/JjRbLVP">
  margin: auto;</a> by Kazuhito Nakayama (<a href="https://codepen.io/kazuhito-nakayama">@kazuhito-nakayama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>



## 2　text-align: center;
### 何に対してtext-align: center;を適用させるか
中央揃えしたい要素の親要素
### 使う場面
中央揃えしたい要素が**インライン要素**の時

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="kazuhito-nakayama" data-slug-hash="dypOebG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="inline-textalign">
  <span>See the Pen <a href="https://codepen.io/kazuhito-nakayama/pen/dypOebG">
  inline-textalign</a> by Kazuhito Nakayama (<a href="https://codepen.io/kazuhito-nakayama">@kazuhito-nakayama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>


**ただし、インライン要素にdisplay: blockをかけてブロック要素にしてしまう別解もあります**
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="kazuhito-nakayama" data-slug-hash="KKgNRwx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="inline-to-block">
  <span>See the Pen <a href="https://codepen.io/kazuhito-nakayama/pen/KKgNRwx">
  inline-to-block</a> by Kazuhito Nakayama (<a href="https://codepen.io/kazuhito-nakayama">@kazuhito-nakayama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

## 3　positionプロパティ
### 何に対してpositionプロパティを適用させるか
中央揃えしたい要素の親要素に

```css:index.html
position: relative;
```
中央揃えしたい要素の親要素に

```css:index.css
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
```
### 使う場面
中央揃えしたい要素は、**ブロック要素**でも**インライン要素**でも使える。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="kazuhito-nakayama" data-slug-hash="qBaqYOO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="position">
  <span>See the Pen <a href="https://codepen.io/kazuhito-nakayama/pen/qBaqYOO">
  position</a> by Kazuhito Nakayama (<a href="https://codepen.io/kazuhito-nakayama">@kazuhito-nakayama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

author: Kazuhito Nakayama [twitter](https://twitter.com/facultyoflaw11)