margin: 0 auto

<div class="content">コンテンツの中央揃え</div>


.content {
  width: 300px;
  border: solid 1px #dc143c;
  /*  問題1. ブロック要素の中央揃え */
  margin: 0 auto;
}


<div class="content">コンテンツを中央揃えにしよう。</div>


.content {
  width: 300px;
  border: solid 1px #dc143c;
  /*  問題1. ブロック要素の中央揃え */
}



    const questions = [
        {
            title: 'コンテンツの中央揃え',
            tests: [
                {
                    title: '`style.css`を開き、`.content`クラスに対し、`*margin*`プロパティを指定し、中央揃えにしてください。',
                    hint: '上下の余白は`*0*`としましょう。左右の余白を自動で同じ大きさにするには、`*auto*`を指定します。',
                    test: () => isContainTextInEditor('margin: 0 auto;', 'style.css', '.content {', '}')
                }
            ]
        }
    ];


marginを使用した中央揃え

max-width

wrapper

padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

ラッパーの実装

display: inline-block

text-align

ボタンの中央寄せ

display: flex;

justify-content

align-items

flexを使用した中央揃え

position

top, bottom

left

transform

transformを使用した中央揃え

【演習】TOPページコンテンツの中央揃え

grid

place-content

place-items

gridを使用した中央揃え

position: relative

position: absolute

inset

margin

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

insetを使用した中央揃え

background

.bg-test {
  background-image: url('./img/test.jpg');
  $(1): $(2);
}

paddingを使用した中央揃え

height

width

画像中央へのテキストの配置

【演習】TOPページコンテンツの中央揃え2

中央揃えはウェブデザインの重要な要素です。
positionやflexプロパティの活用で、任意の要素を中央に配置するテクニックを身につけます。


0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【応用編📚】高度なCSSテクニックを習得しよう

「中央揃えのやり方について学ぼう」レッスンの総復習クイズです。