CSS レイアウト - 水平と垂直アライメント

要素の中央配置

水平および垂直に中央に配置された要素

要素を中央に配置

ブロック要素（例えば <div> ）を水平に中央に配置するには、以下を使用してください。 margin: auto;。

要素の幅を設定することで、それがコンテナのエッジまで延びるのを防ぐことができます。

その後、要素は指定された幅を占めるようになり、残りのスペースは2つの外側マージン間で均等に分配されます：

この div 要素は中央に配置されています。

例

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  right: 0px;
}

自分で試してみましょう

padding: 10px;設定されていない場合 width 属性（またはそれを 100％ に設定）を設定しない場合、中央に配置は無効です。

テキストを中央に配置

要素内にテキストのみを中央に配置する必要がある場合、以下を使用してください。 text-align: center;：

このテキストは中央に配置されています。

例

.center {
  text-align: center;
  border: 3px solid green;
}

自分で試してみましょう

ヒント：テキストの配置方法に関するさらに多くの例については、参照してください。 CSS テキスト この章。

画像を中央に配置

画像を中央に配置するには、左右の外側マージンを設定してください。 auto，并将其设置为块元素：

例

、それをブロック要素として設定します：
  img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

自分で試してみましょう

width: 40%;

左と右アライメント - positionを使用 position: absolute; 要素をアライメントする方法の一つは、

:

例

float
  position: absolute;
  このdivは右にアライメントされています。
  float: right;
  width: 300px;
  right: 0px;
}

自分で試してみましょう

padding: 10px;padding: 20px;

絶対位置の要素は通常のフローより削除され、要素の重複が発生する可能性があります。

左と右アライメント - floatを使用 要素をアライメントするもう一つの方法は、 属性：

例

float
  .right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
}

自分で試してみましょう

padding: 10px;注意： 要素が含む要素よりも高く、浮動している場合、それはコンテナから溢れます。 clearfix hack

clearfix Hackを追加して、この問題を解決します（以下の例を参照してください）。

次に、含む要素に overflow: auto;、この問題を解決するために：

例

.clearfix {
  overflow: auto;
}

自分で試してみましょう

垂直アライメント - paddingを使用

CSSで要素を垂直にアライメントする方法はたくさんあります。シンプルな解決策として、上下のインラインスペースを使用します：

私は垂直に中央に配置されています。

例

.center {
  padding: 70px 0;
  border: 3px solid green;
}

自分で試してみましょう

垂直および水平アライメントを同時に行う場合は、 padding および text-align: center;：

私は水平および垂直に中央に配置されています。

例

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

自分で試してみましょう

垂直アライメント - line-heightを使用

もう一つの技術は、その値は height 属性値の line-height 属性：

私は水平および垂直に中央に配置されています。

例

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* 多行テキストがある場合、以下のコードを追加してください：*/
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

自分で試してみましょう

垂直アライメント - position と transformを使用

あなたの選択が padding および line-height、それでは別の解決策は、 position および transform 属性：

私は水平および垂直に中央に配置されています。

例

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

自分で試してみましょう

ヒント：あなたは 2D 変換 この章では、transform属性についてもっと学びます。

垂直アライメント - Flexboxを使用して

あなたはまた、flexboxを使用して内容を中央に配置できます。ただし、IE10およびそれ以前のバージョンではflexboxがサポートされていません：

私は水平および垂直に中央に配置されています。

例

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

自分で試してみましょう

ヒント：あなたは私の CSS Flexbox この章では、Flexboxについてもっと学びます。