Div 内のテキストを垂直方向に揃える方法

div を操作するとき、場合によっては、div 内のテキストが確実に揃えられるようにする必要があります。真ん中に縦方向に。これはさまざまな方法で実現できます。

line-height を使用する

div の高さが 50px など固定されている場合は、単純に line-height を使用できます。 CSS プロパティ.

#abc {
  height: 50px;
  line-height: 50px;
}

これにより、テキストが div 内で垂直方向の中央に配置されます。

表示プロパティの使用

複数行のテキストの場合は、テキストを要素をスパンし、表示プロパティとvertical-align.

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

transform プロパティの使用

もう 1 つの方法では、translateY() 関数でtransform プロパティを使用します。これは、表示プロパティをサポートしていない古いブラウザで特に便利です。

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}