CSS3 プロパティはどのようにして水平方向のセンタリングと垂直方向のセンタリングを実現しますか?

CSS3 プロパティはどのようにして水平方向の中央揃えと垂直方向の中央揃えを実現するのでしょうか?

Web デザインの発展に伴い、要素の水平方向および垂直方向の中央揃えを実現することがますます重要になってきています。 CSS3 では、いくつかのプロパティとテクニックを使用して、これらのレイアウト効果を簡単に実現できます。この記事では、水平方向および垂直方向の中央揃え効果を実現するために、一般的に使用されるいくつかの CSS3 プロパティとコード例を紹介します。

1. 水平方向の中央揃え

1. 水平方向の中央揃えには text-align 属性を使用します
親要素の text-align 属性を使用して、子要素の水平方向の中央揃えを実現します。
コード例:

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

display:inline-block を使用する子要素は、親要素の水平方向の中央に配置されます。

2. 水平方向のセンタリングに margin 属性を使用する
水平方向のセンタリングは、子要素に margin-left:auto と margin-right:auto を設定することで実現されます。
コード例:

.parent {
  text-align: center;
}

.child {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

display:block を使用する子要素は、親要素の水平方向の中央に配置されます。

3. 水平方向のセンタリングにフレックスボックスを使用する
フレックスボックス レイアウトを使用すると、より柔軟に水平方向のセンタリングを実現できます。
コード例:

.parent {
  display: flex;
  justify-content: center;
}

.child {
  /* 子元素样式 */
}

子要素の水平方向の中央揃えは、親要素の display:flex プロパティと justify-content:center プロパティを設定することで実現できます。

2. 垂直方向のセンタリング

1. 垂直方向のセンタリングには line-height 属性を使用します
親要素の line-height 属性を親要素の高さの値と同じに設定します。 、単一行のテキストを垂直方向の中央揃えに設定できます。
コード例:

.parent {
  height: 100px;
  line-height: 100px;
}

.child {
  /* 子元素样式 */
}

line-height 属性を親要素の高さの値と同じに設定すると、子要素のコンテンツが親要素の垂直方向の中央に配置されます。

2. 垂直方向の中央揃えに table 属性を使用する
垂直方向の中央揃えを実現するには、親要素を display:table に設定し、子要素を display:table-cell に設定してから、vertical-align を使用します。真ん中 。
コード例:

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

display:table と display:table-cell を使用して、子要素を親要素内で垂直方向の中央に配置します。

3. 垂直方向のセンタリングにはtransform属性を使用します。
親要素をposition:relativeに設定し、子要素をposition:absoluteに設定し、top:50%とtransform:translateY(-50%を使用します) ) 垂直方向のセンタリングを実現します。
コード例:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

transform:translateY(-50%) を使用して、子要素を親要素内の垂直方向の中央に配置します。

要約すると、いくつかの CSS3 プロパティとテクニックを使用することで、要素の水平方向の中央揃えと垂直方向の中央揃えを簡単に実現できます。実際のニーズに応じて、レイアウト効果を実現する適切な方法を選択してください。この記事がお役に立てば幸いです。

以上がCSS3 プロパティはどのようにして水平方向のセンタリングと垂直方向のセンタリングを実現しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。