常連

**上下**中央寄せだとすると、以下のような流れで中央寄せがされています。大きな黒線の四角が親要素、その中の緑線の四角が子要素で、点線はそれぞれ上下、左右の中央を表しています。

![absolute, transformでの中央寄せの流れ](d2b854b0eb93f03c40f2e28adf3f84ba.gif)

この挙動を理解するうえで、以下が重要なポイントだと思います。
- 親要素の[`positionプロパティ`](https://developer.mozilla.org/ja/docs/Web/CSS/position)に`static`以外の値(今回は`relative`)が設定されているため、**子要素は親要素の左上を基準位置とする**。
- [`transformプロパティ`](https://developer.mozilla.org/ja/docs/Web/CSS/transform)の[`translate関数`](https://developer.mozilla.org/ja/docs/Web/CSS/transform#translate)でのパーセント指定は、**親要素の幅ではなく、自身の幅に対する割合**になる。

画像内の各ステップでのコードは以下のようになります。
- step.1
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="parent"></div>
</body>
</html>
```
- step.2
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 3px solid #000;
        }

        /* 追加ここから */
        .child {
            position: absolute;
            width: 250px;
            height: 100px;
            border: 3px solid #afa;
        }
        /* 追加ここまで */
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
```
- step.3
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 3px solid #000;
        }

        .child {
            position: absolute;
            top: 50%; /* 追加 */
            width: 250px;
            height: 100px;
            border: 3px solid #afa;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
```
- step.4
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 3px solid #000;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%; /* 追加 */
            width: 250px;
            height: 100px;
            border: 3px solid #afa;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
```
- step.5
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 3px solid #000;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 250px;
            height: 100px;
            transform: translate(-50%, 0); /* 追加 */
            border: 3px solid #afa;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
```
- step.6
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 3px solid #000;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 250px;
            height: 100px;
            transform: translate(-50%, -50%); /* 追加 */
            border: 3px solid #afa;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
```

**上下**中央寄せだとすると、以下のような流れで中央寄せがされています。大きな黒線の四角が親要素、その中の緑線の四角が子要素で、点線はそれぞれ上下、左右の中央を表しています。

![absolute, transformでの中央寄せの流れ](d2b854b0eb93f03c40f2e28adf3f84ba.gif)

この挙動を理解するうえで、以下が重要なポイントだと思います。
- 親要素の[`positionプロパティ`](https://developer.mozilla.org/ja/docs/Web/CSS/position)に`static`以外の値(今回は`relative`)が設定されているため、**子要素は親要素の左上を基準位置とする**。
- [`transformプロパティ`](https://developer.mozilla.org/ja/docs/Web/CSS/transform)の[`translate関数`](https://developer.mozilla.org/ja/docs/Web/CSS/transform#translate)でのパーセント指定は、**親要素の幅ではなく、自身の幅に対する割合**になる。

画像内のステップでのコードは以下のようになります。
- step.1
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="parent"></div>
</body>
</html>
```
- step.2
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 3px solid #000;
        }

        /* 追加ここから */
        .child {
            position: absolute;
            width: 250px;
            height: 100px;
            border: 3px solid #afa;
        }
        /* 追加ここまで */
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
```
- step.3
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 3px solid #000;
        }

        .child {
            position: absolute;
            top: 50%; /* 追加 */
            width: 250px;
            height: 100px;
            border: 3px solid #afa;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
```
- step.4
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 3px solid #000;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%; /* 追加 */
            width: 250px;
            height: 100px;
            border: 3px solid #afa;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
```
- step.5
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 3px solid #000;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 250px;
            height: 100px;
            transform: translate(-50%, 0); /* 追加 */
            border: 3px solid #afa;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
```
- step.6
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body, .parent {
            width: 100%;
            height: 100%;
        }

        body {
            padding: 5px;
        }

        .parent {
            position: relative;
            border: 3px solid #000;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 250px;
            height: 100px;
            transform: translate(-50%, -50%); /* 追加 */
            border: 3px solid #afa;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
```

@@ -14,7 +14,7 @@
-画像内のステップでのコードは以下のようになります。
+画像内の各ステップでのコードは以下のようになります。
 - step.1

回答編集履歴