CSS レイアウト – 水平および垂直の配置

要素を中央揃えする

ブロック要素（例：<div>）を水平に中央揃えするには、margin: auto;を使用します。

要素の幅を設定すると、要素がコンテナの端まで伸びなくなります。

指定した幅を要素が取り、残りのスペースは両方のマージンの間で均等に分割されます：

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

注意：幅プロパティが設定されていない場合（または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;を使用することです：

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

左右揃え – floatを使用

要素を揃える別の方法は、floatプロパティを使用することです：

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

クリアフィックスのハック

注意：要素がそのコンテナよりも高い場合、かつfloatされている場合、その要素はコンテナの外にはみ出します。この問題を修正するには「clearfix hack」を使用できます（以下の例を参照）。

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

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

要素を垂直方向に中央揃えるための簡単な方法は、上下のパディングを使用することです：

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

垂直方向と水平方向の両方を中央揃えするには、パディングとtext-align: center;を使用します：

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

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

別のトリックとして、line-heightプロパティを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を使用

パディングと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を使用して要素を中央揃えすることができます。ただし、FlexboxはIE10およびそれ以前のバージョンではサポートされていないことに注意してください：

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