CSS レイアウト - 水平 & 垂直配置

要素の中央揃え

要素（<div> など）を水平方向に中央揃えするには、次を使用できますmargin: auto;。

要素に幅を設定すると、コンテナの端にオーバーフローするのを防げます。

要素は幅を指定し、両側の余白を均等に分配することで：

注意:設定されていない場合width属性（または 100% に設定）の場合、中央揃えは機能しません。

テキストの中央揃え

要素内のテキストを中央揃えするだけの場合は、次を使用できますtext-align: center;

提示:その他のテキスト整列の例については、...を参照してくださいCSS 文本章节。

画像の中央揃え

画像を中央揃えするには、次を使用できますmargin: auto;并将它放到块元素中:

左右揃え - 位置指定方式を使用

私たちは使用できますposition: absolute;プロパティで要素を整列します:

注释：絶対配置された要素は通常のフローから除外され、他の要素と重なることができます。

提示:当使用position要素を揃えるとき、通常<body>元素会设置marginとpadding。これにより、ブラウザーによる表示の違いを避けることができます。

position 属性を使用する場合、IE8 およびそれ以前のバージョンには問題があります。コンテナ要素（この例では <div class="container">）に指定した幅が設定され、!DOCTYPE 宣言が省略されていると、IE8 およびそれ以前のバージョンでは右側に 17px のマージンが追加されます。これはスクロールバー用に確保されたスペースのようです。position 属性を使用する場合は、常に !DOCTYPE 宣言を設定してください：

左右配置 - float 方式を使用

私たちも使用できますfloatプロパティで要素を整列します:

このように要素を配置する場合、<body> 要素のマージンとパディングを事前に定義しておくことをお勧めします。これにより、ブラウザーによる表示の違いを避けることができます。

注意：子要素の高さが親要素よりも高く、子要素にフロートが設定されている場合、子要素はオーバーフローします。この場合は「clearfix（フロートの解除）」を使用してこの問題を解決できます。

親要素に overflow: auto; を追加することで、子要素のオーバーフローの問題を解決できます：

float 属性を使用する場合、IE8 およびそれ以前のバージョンには問題があります。!DOCTYPE 宣言が省略されていると、IE8 およびそれ以前のバージョンでは右側に 17px のマージンが追加されます。これはスクロールバー用に確保されたスペースのようです。float 属性を使用する場合は、常に !DOCTYPE 宣言を設定してください：

垂直方向の中央揃え - padding を使用

CSS には垂直中央揃えを実現する方法がたくさんあります。簡単な方法の1つは、ヘッダー上部で次を使用することですpadding:

水平方向と垂直方向の両方を中央揃えする場合は、次を使用できますpaddingとtext-align: center:

垂直方向の中央揃え - line-height を使用

垂直方向の中央揃え - position と transform を使用

使用する以外にpaddingとline-height属性以外にも、次のものを使用できますtransform属性を使用して垂直中央揃えを設定する:

提示:transform 属性の詳細については、次を参照してください2D 翻转章节。

更多实例

CSS で margin を使用して div を中央揃えにする

CSS で絶対配置を使用して div を右揃えにする