CSSセンターで完全攻略を実現

水平方向中央:行内要素ソリューション

行の要素を1つの属性displayがblockの親要素にラップし、親要素に次の属性を追加するだけです.

text-align: center

適用要素:文字、リンク、その他のinlineまたはinline-*タイプ要素(inline-block、inline-table、inline-flex)

水平方向中央:ブロック要素解決

ブロック要素(display:block)では、その左右の外側距離(すなわち、margin-left、margin-right)をautoに設定すると、ブロック要素の中央を以下のように実現することができます.

.center{  /*             */  margin: 10px auto;}

水平方向中央:複数のブロック要素ソリューション

ページに複数のブロック要素が水平に中央に並ぶ必要がある場合は、要素のdisplayプロパティをinline-blockに設定し、親要素のtext-alignプロパティをcenterに設定すれば実現できます.

水平方向中央:複数のブロック要素ソリューション(flexboxレイアウトを使用して実装)

flexboxレイアウトを使用するには、処理するブロック要素の親要素に属性display:flexおよびjustify-content:centerを追加するだけです.

垂直方向中央:1行の行内要素ソリューション

行内の要素、すなわちinline、inline-*タイプの要素を中央に配置する必要がある場合は、そのheightとline-heightを親要素の高さに同時に設定すると垂直中央に配置できます.

#container{  background: #222;  height: 200px;}/*       ， a   height line-height                    */a{    height: 200px;  line-height:200px;    color: #FFF;}

垂直方向中央:複数行の行内要素ソリューション

display:table-cellとvertical-align:middleプロパティを組み合わせて、中央に配置する要素が必要な親コンテナ要素の生成効果を定義します.次のようにします.

.container{  background: #222;  width: 300px;  height: 300px;  /*          */  display: table-cell;  vertical-align:middle;}

垂直方向中央:高さが既知のブロック要素ソリューション

中央の要素に関する属性を次のように定義します.

/*         */.item{  top: 50%;  margin-top: -50px;  position: absolute;  padding:0;}

垂直方向中央:未知の高さのブロック要素ソリューション

高さが分からない要素の場合は、transformプロパティを使用して垂直方向に移動して垂直方向の中央揃えを実現します.

.item{  top: 50%;  position: absolute;  transform: translateY(-50%); /*       css3 transform        */}

水平垂直方向中央:高さと幅が既知の要素ソリューション

前述した方法と同様に、要素をabsoluteに配置し、top、left絶対値を50%、margin-top、margin-leftを要素の高さの半分の負の値に設定することができます.以下のようにします.

.item{  position: absolute;  top: 50%;  left: 50%;  margin-top: -75px;  margin-left: -75px;}

水平垂直方向中央:不明な高さと幅の要素ソリューション

同様のtransformプロパティを使用して定義すると、次のようになります.

.item{  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}