要素やテキストの中央配置

こんがらがった際にチラ見して最低限思い出せる用の個人メモ。
(随時追加...)

注: センタリングではなく、<strong>中央配置</strong>についてです。

# 目次

<strong>要素の中央配置</strong>

- 1. positionを使う場合
- 2. flexを使う場合
- 3. gridを使う場合
- 4. table-cellを使う場合

<strong>テキストの中央配置</strong>

- 1. flexを使う場合


# 要素の中央配置

## 1. positionを使う場合

<font color="DarkOrange">親要素</font>に以下を追加

```css
position: relative;
```

`子要素`に以下を追加

```css
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
```
<p class="codepen" data-height="400" data-theme-id="dark" data-default-tab="css,result" data-user="nonMan21" data-slug-hash="yLaLYrE" 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="yLaLYrE">
  <span>See the Pen <a href="https://codepen.io/nonMan21/pen/yLaLYrE">
  yLaLYrE</a> by non Man (<a href="https://codepen.io/nonMan21">@nonMan21</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

小要素に兄弟要素がある場合でも基本的に関係ない。

## 2. flexを使う場合

<font color="DarkOrange">親要素</font>に以下を追加

```css
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
```
<p class="codepen" data-height="400" data-theme-id="dark" data-default-tab="css,result" data-user="nonMan21" data-slug-hash="jOMObXY" 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="jOMObXY">
  <span>See the Pen <a href="https://codepen.io/nonMan21/pen/jOMObXY">
  jOMObXY</a> by non Man (<a href="https://codepen.io/nonMan21">@nonMan21</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

小要素に兄弟要素がある場合、兄弟要素のくくりごと中央になる。
(1つ小要素に対して上記のような使い方はあまりしない。flexについては別記事でまとめ中)

## 3. gridを使う場合

<font color="DarkOrange">親要素</font>に以下を追加

```css
display: grid;
align-content: center;
justify-items: center;
```
<p class="codepen" data-height="400" data-theme-id="light" data-default-tab="css,result" data-user="nonMan21" data-slug-hash="gOwayyr" 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="gOwayyr">
  <span>See the Pen <a href="https://codepen.io/nonMan21/pen/gOwayyr">
  gOwayyr</a> by non Man (<a href="https://codepen.io/nonMan21">@nonMan21</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 4. table-cellを使う場合

<font color="DarkOrange">親要素</font>に以下を追加

```css
display: table-cell;
vertical-align: middle;
text-align:center;
```
<p class="codepen" data-height="400" data-theme-id="dark" data-default-tab="css,result" data-user="nonMan21" data-slug-hash="eYdYpPj" 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="eYdYpPj">
  <span>See the Pen <a href="https://codepen.io/nonMan21/pen/eYdYpPj">
  eYdYpPj</a> by non Man (<a href="https://codepen.io/nonMan21">@nonMan21</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# テキストの中央配置

## 1. flexを使う場合

対象に以下を追加

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

<p class="codepen" data-height="400" data-theme-id="dark" data-default-tab="css,result" data-user="nonMan21" data-slug-hash="OJRJVKJ" 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="OJRJVKJ">
  <span>See the Pen <a href="https://codepen.io/nonMan21/pen/OJRJVKJ">
  OJRJVKJ</a> by non Man (<a href="https://codepen.io/nonMan21">@nonMan21</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

ランキングとか通知などのコンテンツ実装時、テキストしか入らない場合はこれ入れるだけなのでスムーズ。
親要素関係なくスタイルできるので、他の大きなコンポーネントへの影響を切り離したい小さいパーツなどにも良いかもです。