CSS の中央揃えのいくつかの方法

Web デザインでは、見た目と読みやすさの両方においてセンタリングが非常に重要です。 CSS では中央揃えを実現する方法がたくさんありますが、ここでは一般的に使用される方法をいくつか紹介します。

1. テキストの中央揃え

1. インライン要素のテキストの中央揃え

単一行のテキストの場合、text-align 属性を使用して中央揃えを完了できます。

<div style="text-align: center;">这里是居中的文本</div>

2. ブロック要素のテキストは中央に配置されます

複数行のテキストまたはブロック要素の場合、margin 属性を使用して左右のマージンを auto に設定し、幅を に設定できます。センタリングが 100% 完了するわけではありません。

<div style="margin: 0 auto; width: 80%;">这里是居中的多行文本</div>

2. 要素のセンタリング

1. 水平方向のセンタリング

margin 属性を使用し、左右のマージンを auto に設定して水平方向のセンタリングを完了します。

<div style="margin: 0 auto;"></div>

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

垂直方向のセンタリング方法はより複雑で、実装方法は多数あります。

(1) Flexbox

を使用して親要素に display:flex と align-items:center を設定し、垂直方向の中央揃えを実現します。

<div style="display: flex; align-items: center; height: 200px;">
  <div>这里是垂直居中的元素</div>
</div>

(2) table-cellを使用します

親要素にdisplay:tableとvertical-align:middleを設定し、子要素にdisplay:table-cellを設定して垂直方向の中央揃えを実現します。 。

<div style="display: table; height: 200px; width: 100%;">
  <div style="display: table-cell; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

(3)Absolute

を使用して、子要素にposition:absolute;top:50%;left:50%とtransform:translate(-50%,-50%)を設定します。 、つまり垂直方向のセンタリングが可能です。

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">这里是垂直居中的元素</div>
</div>

(4) line-height を使用します

親要素の height と line-height を等しく設定し、子要素にvertical-align:middleを設定して垂直方向の中央揃えを実現します。

<div style="height: 200px; line-height: 200px;">
  <div style="display: inline-block; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

上記の方法により、Web ページ内の要素の中央揃え効果を簡単に実現できます。ページ上でより良い視覚効果を実現するには、特定の状況に応じて適切な方法を選択する必要があります。

以上がCSS の中央揃えのいくつかの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。