HTMLとCSSを使用して要素を垂直および水平に中央揃えする方法

方法1: Flexboxを使用する方法 HTML:

<div class="container">
  <div class="centered-element">中央揃えされる要素</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: center; /* 水平中央揃え */
  align-items: center; /* 垂直中央揃え */
  height: 100vh; /* ビューポートの高さいっぱいに要素を表示 */
}
.centered-element {
  /* 必要に応じて要素のスタイルを指定 */
}

方法2: 表示テーブルを使用する方法 HTML:

<div class="container">
  <div class="table">
    <div class="table-cell">
      <div class="centered-element">中央揃えされる要素</div>
    </div>
  </div>
</div>

CSS:

.container {
  display: table;
  width: 100%;
  height: 100vh;
}
.table {
  display: table-cell;
  vertical-align: middle; /* 垂直中央揃え */
  text-align: center; /* 水平中央揃え */
}
.centered-element {
  /* 必要に応じて要素のスタイルを指定 */
}

方法3: 絶対位置指定を使用する方法 HTML:

<div class="container">
  <div class="centered-element">中央揃えされる要素</div>
</div>

CSS:

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}
.centered-element {
  position: absolute;
  top: 50%; /* 上端を中央に揃える */
  left: 50%; /* 左端を中央に揃える */
  transform: translate(-50%, -50%); /* 要素自体を中央に移動 */
  /* 必要に応じて要素のスタイルを指定 */
}

これらの方法を使用すると、要素を垂直および水平に中央揃えすることができます。適切な方法を選択して、ウェブデザインのニーズに合わせてコードを適用してください。