[CSS] display grid; を使って最短2行で上下左右中央揃えする方法

MARKLEAPS

2025.04.08

CSSで要素を上下左右中央揃えにする方法はいくつかありますが、display: grid; を使えば最短2行で要素の上下左右中央揃えを実現できます。

・html

<div class="parent">
  <div class="content_center">
    <p>テキストテキストテキスト</p>
  </div>
</div>

<p>テキストテキストテキスト</p>

</div>

・css

.content_center {
  display: grid;
  place-items: center;
}

.content_center {

display: grid;

place-items: center;

}

・デモ

Flexbox を使う方法だと3行必要でした。

.content_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content_center {

display: flex;

justify-content: center;

align-items: center;

}

position を使う方法だと5行必要でした。

.parent {
  position: relative;
}

.content_center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

.parent {

position: relative;

}

.content_center {

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -100px;

}

CSS

よく読まれている関連記事