CSSでボックスの中心を設定する方法

CSS では、複数のメソッドを使用してボックスを中央に配置できます: 水平方向の中央揃え: margin: 0 auto; 垂直方向の中央揃え: 水平および垂直方向の中央揃え: 表示: flex ; align-items: center;

CSS でのボックスの中心設定

CSS では、さまざまな方法を使用できます。ボックスを中央揃えにするメソッド。

水平中心

• margin: 0 auto;: これは最も一般的に使用される方法で、ボックスを水平方向に揃えます。親要素の中心。
• text-align: center;: ボックス内のテキストのみを中央揃えにします。

垂直方向の中央

• ##vertical-align: middle;: ボックスを垂直方向の中央に配置して、親要素を揃えます。
• line-height: ボックス内のテキストが垂直方向の中央に配置されるように、ボックスの高さを設定します。 (単一行のテキストに適用)
• display: flex; align-items: center;: フレックスボックス レイアウトを使用してボックスを垂直方向の中央に配置し、親要素を配置します。 (複数行テキストの場合)

#水平方向と垂直方向の中央揃え

##transform: translation(-50%, -50%) ;

: CSS 変換を使用して、ボックスを水平方向と垂直方向に同時に中央に配置します。
• display: flex; justify-content: center; align-items: center;
: フレックスボックス レイアウトを使用して、ボックスを水平方向と垂直方向に同時に中央揃えにします。
サンプルコード:

.container {
  width: 200px;
  height: 100px;
  margin: 0 auto;  /* 水平居中 */
  text-align: center;  /* 文本水平居中 */
  vertical-align: middle;  /* 垂直居中 */
}

以上がCSSでボックスの中心を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。