Sampleを見る

中央ぞろえ

水平中央揃え

1. テキストを中央揃えにする

テキストを中央揃えにするには、text-alignプロパティを使用します。

.text-center {
    text-align: center;
}

2. 要素を水平中央揃えにする（インライン要素）

インライン要素やインラインブロック要素を水平中央揃えにするには、親要素にtext-align: center;を使用します。

.inline-center {
    text-align: center;
}

<div class="inline-center">
    <span>Centered Text</span>
    <img src="image.png" alt="Centered Image">
</div>

3. 要素を水平中央揃えにする（ブロック要素）

ブロック要素を水平中央揃えにするには、margin: auto;を使用します。

.block-center {
    width: 50%; /* 要素の幅を指定 */
    margin: 0 auto;
}

<div class="block-center">
    Centered Block Element
</div>


4. 要素を垂直中央揃えにする（Flexbox）

Flexboxを使用して要素を垂直および水平中央揃えにするには、親要素に以下のスタイルを適用します。

.flex-center {
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    height: 100vh; /* 親要素の高さを設定 */
}

<div class="flex-center">
    <div>Centered Item</div>
</div>


5. 要素を垂直中央揃えにする（Grid）

CSS Gridを使用して要素を垂直および水平中央揃えにするには、親要素に以下のスタイルを適用します。

.grid-center {
    display: grid;
    place-items: center; /* 垂直および水平中央揃え */
    height: 100vh; /* 親要素の高さを設定 */
}

<div class="grid-center">
    <div>Centered Item</div>
</div>


6. 絶対位置を使用して中央揃え

要素を絶対位置で中央揃えにするには、親要素に position: relative; を設定し、子要素に position: absolute; を設定します。親要素の中に子要素を浮かせて上下左右からの位置を指定するイメージ

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

<div style="position: relative; height: 200px;">
    <div class="absolute-center">
        Centered Absolute Position
    </div>
</div>

直感的に分かりにくいのは「transform: translate(-50%, -50%);」の部分です。

このプロパティは、子要素を自分自身の幅と高さの50%分だけ逆方向に移動させます。その結果、子要素の中心が親要素の中心に来るのです。ただし、定型文としてコピペしていただければと思います。

7. テーブルセルを使用して中央揃え

テーブルレイアウトを使用して要素を中央揃えにするには、以下のスタイルを適用します。

.table-center {
    display: table;
    width: 100%;
    height: 100vh;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

<div class="table-center">
    <div class="table-cell">
        Centered Table Cell
    </div>
</div>

以上が左右中央に揃える方法です。

上下中央揃え

以下に代表的な方法を紹介します。

1. Flexboxを使用して上下中央揃え

Flexboxを使用すると、親要素に簡単なスタイルを適用するだけで、子要素を上下左右の中央に配置できます。

.flex-center {
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    height: 100vh; /* 親要素の高さを設定 */
}

<div class="flex-center">
    <div>Centered Item</div>
</div>





2. CSS Gridを使用して上下中央揃え





CSS GridもFlexbox同様に、親要素にスタイルを適用することで簡単に上下中央揃えを実現できます。





.grid-center {
    display: grid;
    place-items: center; /* 垂直および水平中央揃え */
    height: 100vh; /* 親要素の高さを設定 */
}

<div class="grid-center">
    <div>Centered Item</div>
</div>












3. 絶対位置を使用して上下中央揃え





絶対位置を使用して要素を中央揃えにする方法です。親要素に position: relative; を設定し、子要素に position: absolute; を設定します。





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

<div style="position: relative; height: 200px;">
    <div class="absolute-center">
        Centered Absolute Position
    </div>
</div>













4. テーブルセルを使用して上下中央揃え





テーブルレイアウトを使用して要素を中央揃えにする方法です。





.table-center {
    display: table;
    width: 100%;
    height: 100vh;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

<div class="table-center">
    <div class="table-cell">
        Centered Table Cell
    </div>
</div>













5. Margin Autoを使用して上下中央揃え（Flexboxと組み合わせる）





margin: auto; を使用して要素を上下中央揃えにする方法です。親要素に display: flex; を設定し、子要素に margin: auto; を設定します。





.margin-auto {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直方向の中央揃え */
    height: 100vh; /* 親要素の高さを設定 */
}

.margin-auto .centered {
    margin: auto;
}

<div class="margin-auto">
    <div class="centered">Centered Item</div>
</div>













以上が上下中央に揃える方法です。





右揃え





1. テキストを右寄せにする





テキストを右寄せにするには、text-alignプロパティを使用します。





.text-right {
    text-align: right;
}

<div class="text-right">
    This text is right-aligned.
</div>












2. インライン要素を右寄せにする





インライン要素を右寄せにするには、親要素にtext-align: right;を使用します。





.inline-right {
    text-align: right;
}

<div class="inline-right">
    <span>Right-aligned text</span>
    <img src="image.png" alt="Right-aligned image">
</div>












3. ブロック要素を右寄せにする





ブロック要素を右寄せにするには、margin-left: auto;を使用します。margin-left: auto は、利用可能な空間を左側のマージンに割り当てるため、要素は右側に配置されます。要素の幅（以下の例では200px）を指定する必要があります。





.block-right {
    display: block;
    margin-left: auto;
}

<div class="example" style="text-align: right;">
    <div class="block-right" style="width: 200px;">
        This block element is right-aligned.
    </div>
</div>












4. Flexboxを使用して右寄せにする





Flexboxを使用して要素を右寄せにするには、親要素に以下のスタイルを適用します。





.flex-right {
    display: flex;
    justify-content: flex-end; /* 水平方向の右寄せ */
}

<div class="flex-right">
    <div>Right-aligned item</div>
</div>












5. Gridを使用して右寄せにする





CSS Gridを使用して要素を右寄せにするには、親要素に以下のスタイルを適用します。





.grid-right {
    display: grid;
    justify-items: end; /* 水平方向の右寄せ */
}

<div class="grid-right">
    <div>Right-aligned item</div>
</div>












6. 絶対位置を使用して右寄せにする





要素を絶対位置で右寄せにするには、親要素にposition: relative;を設定し、右寄せにしたい要素に以下のスタイルを適用します。





.absolute-right {
    position: absolute;
    right: 0;
}

<div style="position: relative; height: 200px;">
    <div class="absolute-right">
        Right-aligned absolute position
    </div>
</div>












7. テーブルセルを使用して右寄せにする





テーブルレイアウトを使用して要素を右寄せにするには、以下のスタイルを適用します。





.table-right {
    display: table;
    width: 100%;
}

.table-cell-right {
    display: table-cell;
    text-align: right; /* 水平方向の右寄せ */
}

<div class="table-right">
    <div class="table-cell-right">
        Right-aligned table cell
    </div>
</div>












以上、中央揃えと右寄せにする方法でした。












Webアプリケーション制作のための小ネタ集　目次に戻る

















最後までお読みいただきありがとうございます。












研修のカリキュラムを見てみる