grid

place-content

place-items

<div class="container1">
  <div>
    <div class="outer-box">
      <div class="inner-box"></div>
    </div>
    <h2>outer-box</h2>
    <p>place-content: center;</p>
  </div>
</div>

<div class="container2">
  <div>
    <div class="outer-box">
      <div class="inner-box"></div>
      <div class="inner-box2"></div>
    </div>
    <h2>outer-box</h2>
    <p>place-content: center;</p>
  </div>
  <div>
    <div class="outer-box2">
      <div class="inner-box"></div>
      <div class="inner-box2"></div>
    </div>
    <h2>outer-box2</h2>
    <p>
      place-content: center;<br />
      place-items: center;
    </p>
  </div>
</div>


.container1 {
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}
.outer-box {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  /*  問題1. Gridを使って要素を中央寄せ */
  display: grid;
  place-content: center;
}
.inner-box {
  width: 50px;
  height: 50px;
  background-color: lightblue;
}
h2 {
  text-align: center;
  font-size: 22px;
}
p {
  text-align: center;
}
.container2 {
  display: flex;
  justify-content: center;
  gap: 64px;
  margin-bottom: 80px;
}
.outer-box2 {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  /*  問題2. Gridを使って複数の要素を中央寄せ */
  display: grid;
  place-content: center;
  place-items: center;
}
.inner-box2 {
  width: 100px;
  height: 50px;
  background-color: blue;
}


.container1 {
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}
.outer-box {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  /*  問題1. Gridを使って要素を中央寄せ */
}
.inner-box {
  width: 50px;
  height: 50px;
  background-color: lightblue;
}
h2 {
  text-align: center;
  font-size: 22px;
}
p {
  text-align: center;
}
.container2 {
  display: flex;
  justify-content: center;
  gap: 64px;
  margin-bottom: 80px;
}
.outer-box2 {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  /*  問題2. Gridを使って複数の要素を中央寄せ */
}
.inner-box2 {
  width: 100px;
  height: 50px;
  background-color: blue;
}


gridを使用した中央揃え

margin: 0 auto

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ページコンテンツの中央揃え

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テクニックを習得しよう

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