ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでボックスの中心を設定する方法

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

下次还敢
下次还敢オリジナル
2024-04-26 13:57:22675ブラウズ

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

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

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;
  • : フレックスボックス レイアウトを使用して、ボックスを水平方向と垂直方向に同時に中央揃えにします。
  • サンプルコード:

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。