CSSを使用してテキストを垂直中央揃えする方法

1. 行の高さを使用する方法:

CSSで行の高さを指定し、テキストを垂直中央に揃えることができます。

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px; /* 適切な高さを指定してください */
}
.text {
  line-height: normal;
}

<div class="container">
  <p class="text">テキストを垂直中央に揃える例</p>
</div>

2. Flexboxを使用する方法:

Flexboxを使用すると、テキストを簡単に垂直中央に揃えることができます。

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px; /* 適切な高さを指定してください */
}

<div class="container">
  <p>テキストを垂直中央に揃える例</p>
</div>

3. 表示プロパティを使用する方法:

CSSのdisplayプロパティを使用して、テキストをtable-cellとして表示し、vertical-alignプロパティを使用して垂直中央に揃えることもできます。

.container {
  display: table;
  height: 200px; /* 適切な高さを指定してください */
}
.text {
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <p class="text">テキストを垂直中央に揃える例</p>
</div>

これらはいくつかの一般的な方法ですが、さまざまな他の方法もあります。使用する具体的な状況に応じて、最適な方法を選択してください。