CSS-は、水平方向および垂直方向中心、垂直方向、水平方向中心を中心

図1に示すように、水平方向にセンタリングされます

センターレベルを分けることができ、水平行の中央に配置されている要素とブロックレベル要素が水平方向にセンタリングされ

線要素は、1.1の中に水平に中央に配置され

ここで、テキスト内の線要素は、単に親要素にテキスト整列を設定する、テキスト、画像IMG、ボタン、ハイパーリンクを指す：センターを実現することができます。

.center{
        text-align:center;
}
<div class="center">水平居中</div>

1.2レベルの要素は、水平方向中心

• 固定幅の水平中央ブロック要素は、
  0自動缶、：だけマージンを中心にブロックレベル要素を追加する必要がありますが、それはここことに留意すべきである、幅値の要素がなければなりませんブロックの幅

    .center{
        width:200px;
        margin:0 auto;
        border:1px solid red;
    }
    <div class="center">水平居中</div>
  

• 不定ワイドブロック要素は、水平方向中心
  可変幅、固定されていないブロックレベル要素の幅
  を設定表：方法1

  要素を表示するセンタリングによってテーブル、次いでマージン設定：0自動達成する表示設定、

    .center{
        display:table;
        margin:0 auto;
        border:1px solid red;
    }
    <div class="center">水平居中</div>

  方法2：ブロックセットインライン（ブロック要素は複数の）
  親要素がテキスト整列を配置しながら、サブ要素は、インラインブロックを配置：中心

    .center{
        text-align:center;
    }
    .inlineblock-div{
        display:inline-block;
    }
    <div class="center">
        <div class="inlineblock-div">1</div>
        <div class="inlineblock-div">2</div>
    </div>
  
  

  方法3：レイアウト・セットは、Flex
  処理対象のブロック要素の唯一の親要素を表示提供される：フレックス、正当化コンテンツ：センター;

    .center{
        display:flex;
        justify-content:center;
    }
    <div class="center">
        <div class="flex-div">1</div>
        <div class="flex-div">2</div>
    </div>
  

  方法4：位置+マージン陰性;
  方法5：位置+マージン：オート;
  方法6：位置+変換。

  注：ここでは同じ方法4,5,6が上下同じ理由の下に中心が、必要トップ/ボトムの左/右のセクションで詳細に説明垂直にセンタリングされます。

2、垂直センタリング

2.1単一行のテキストを垂直方向に中央揃え

• paddingtop = paddingBottomの提供;又は
• 行の高さ=高さを提供し、

テキストの行が縦2.2上に中心

親要素のテーブルを提供し、表のセルのサブ要素アライン=、垂直左によって
ミドルは、親要素の中心的要素を意味する：左の縦-ALIGN =を

垂直中心2.3レベル要素

方法1：フレックスレイアウト
フレックスとALIGN-アイテム：親要素には、垂直に必要な、提供される表示を中心と中心の
要件：親要素のセット高さの値が表示されなければなりません

ディスプレイ：

方法2：位置と上部と負余裕をもって（幅と高さ注）
1、要素が配置され、絶対/相対/固定される
2、=負の半マージンの結果は次の通りであります：

方法3：オート：位置とトップ/ボトムマージンとで（注意しないマージン：自動0）
1、位置：絶対/相対/固定
2、上部/底：0
3、マージン：オート

：結果は以下の通りである。方法4：位置とトップとし、変換率はオフセット変換変換要素自体の大きさを基準にしています。結果は以下の通りであります：

注意：

• ブロックレベルの上記の方法は、ほとんど変化が水平方向、左/右にトップ/ボトムのようにブロック・レベルの方法を中心にすることができる垂直中心
• 変換方法を、中心の要素の大きさは、未知を使用することができます

図3に示すように、水平方向および垂直方向の中心

方法1：絶対位置+マージン：オート

    div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

方法2：絶対位置+負のマージン

    div{
        width:200px;
        height: 200px;
        background:green;
        
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

方法3：絶対位置+変換

    div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:50%;    /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }

方法4：フレックスレイアウト

   .box{
         height:600px;  
         
         display:flex;
         justify-content:center;  //子元素水平居中
         align-items:center;      //子元素垂直居中
           /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
    }
    .box>div{
        background: green;
        width: 200px;
        height: 200px;
    }

方法5：センタリングするためのテーブルセル

• 设置
  表示：表セル。
  テキスト整列：センター;
  垂直整列：中央;