中央揃え

日常の仕事はよく中央に行って、方法はとても多くて、ここでいくつかのよくある方法を整理します

水平方向中央

大まかなリストは、主に3種類あります.
1.適用ブロックレベル要素が水平方向中央

    css： margin:0 auto

2.適用行内要素が水平方向中央

   ： text-align:center

3.既知の中央要素の幅が必要

    :：left:50%;margin-left: -(     /2)；

水平垂直方向中央

絶対位置中央

   ： 
  position: relative
    ： 
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  overflow: auto;

この原理を説明すると、まずドキュメントフローから中央要素を離すために絶対位置を設定し、親要素の相対位置を設定すると絶対位置の中央要素を包むことができ、4つのエッジの絶対パスは0で、実は中央要素のblockを親要素の利用可能な空間に満たすために再描画(ブラウザに4つのエッジを再計算させる)するためで、margin:autoは効果があり、中央に適応させることができます.overflowは、親要素を超えて適応させるために自然に使用されます.
長さと幅を知らない中央に適応するのに適しています

display:flex

   ：
  display: flex;
  justify-content:center;
  align-items:Center;

display:flexは、移動端によく使用されるレイアウトで、マルチバーマルチカラムレイアウトです.
ここでは、2つのプロパティが中央に配置され、複数のブラウザのプレフィックスを互換性があり、知らないことは自分で学ぶことができます.

display:table-cell

   ：
  text-align:center;
  display:table-cell;
  vertical-align: middle

display:table-cellは表のフォーマットのレイアウトで、深く理解したいなら張鑫旭のブログ(css牛人)を見てみましょう.http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/

マイナスマージン中央

    ：
  width: xx; height: xx;
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -（ /2）px;
  margin-left: -（ /2）px;  

中央要素の幅を知る必要があります

translate中心

position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);

画像アダプティブ中央

(1)

   ：
	display: table-cell;
    vertical-align:middle;
    text-align:center;
    width:200px;
    height:200px;

   ：
	vertical-align:middle;
  	max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;

(2)

     ：
    position: relative;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);