16の方法で水平中心垂直中心を実現

水平方向中央
1)行内要素の場合、親要素にtext-align:centerを設定ことで、行内要素の水平中央を実現することができる.
2)ブロックレベルの要素であれば、margin:0 autoを設定すればよい.
3)サブエレメントにfloat:leftプロパティが含まれている場合、サブエレメントを水平に中央に配置するには、親エレメントの幅をfit-contentに設定し、marginと合わせて次のように設定します.

.parent{
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}

fit-contentはCSS 3でwidth属性に新たに追加する属性値であり、marginと合わせて簡単に水平中央を実現することができ、現在はChromeとFirefoxブラウザのみをサポートしている.
4)flex 2012年版レイアウトを使用すると、水平中央を簡単に実現できます.サブ要素は以下のように設定されています.

.son{
    display: flex;
    justify-content: center;
}

5)flex 2009年バージョンを使用し、親要素display:box;box-pack: center;次のように設定します.

.parent {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    display: -o-box;
    -o-box-orient: horizontal;
    -o-box-pack: center;
    display: -ms-box;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    display: box;
    box-orient: horizontal;
    box-pack: center;
}

6)CSS 3に新たに追加されたtransform属性を使用して、サブエレメントを以下のように設定する.

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

7)絶対位置決め方式、および負のmargin-leftを使用して、サブエレメントは以下のように設定されます.

.son{
    position:absolute;
    width:  ;
    left:50%;
    margin-left:-0.5*  ;
}

8)絶対位置決め方式、およびleft:0を使用する.right:0;margin:0 auto; サブエレメントは次のように設定されます.

.son{
    position:absolute;
    width:  ;
    left:0;
    right:0;
    margin:0 auto;
}

垂直方向中央揃え
1行テキスト1)要素が1行テキストの場合、line-heightが親要素の高さに等しいように設定できます.
行内ブロックレベル要素2)要素が行内ブロックレベル要素である場合、display:inline-block,vertical-align:middleと1つの擬似要素を用いてコンテンツブロックを容器の中央に置くことが基本思想である.

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}

これは流行の方法で、IE 7にも適応しています.
要素の高さ不定3)はvertical-align属性を用いることができるが、vertical-alignは親層がtdまたはthの場合にのみ有効であり、div、pなどの他のブロックレベル要素についてはデフォルトではサポートされていない.vertical-alignを使用するには、親要素display:table、子要素display:table-cellを設定する必要があります.vertical-align:middle; 利点*要素の高さは、CSSで定義する必要がなく、親要素に十分なスペースがない場合、要素の内容が切断されないように動的に変更することができる.欠点*IE 6~7、さらにはIE 8 betaで無効である.
4)Flex 2012版が利用可能であり、これはCSSレイアウトの将来のトレンドである.FlexboxはCSS 3の新しい属性であり、設計の初心は垂直中心のような一般的なレイアウト問題を理解することである.フレキシブルボックスモデルFlexガイドの親要素などの関連記事では、サブ要素が垂直に中央にあることを保証します.

.parent {
  display: flex;
  align-items: center;
}

利点*コンテンツブロックの幅が任意で、優雅なオーバーフロー.*より複雑で高度なレイアウト技術に用いることができる.欠点*IE 8/IE 9がサポートされていない*ブラウザベンダーのプレフィックスが必要*レンダリングに問題がある場合があります
5)flex 2009版を使用する.

.parent {
    display: box;
    box-orient: vertical;
    box-pack: center;
}

長所*実現が簡単で、拡張性が強い短所*互換性が悪く、IEをサポートしない
6)transformを使用して、親要素の相対的な配置(position:relative)を設定します.サブ要素は次のcssスタイルです.

.son{
    position:absolute;
    top:50%;
    -webkit-transform: translate(-50%,-50%);  
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

利点*コード量が少ない欠点*IE 8がサポートされていないため、属性にブラウザメーカーのプレフィックスを追加する必要があり、他のtransform効果を妨害する可能性があり、テキストや要素の境界レンダリングがぼやけている場合がある.
要素高さ固定7)親要素の相対位置(position:relative)を設定します.サブ要素は次のcssスタイルです.

.son{
    position:absolute;
    top:50%;
    height:  ;
    margin-top:-0.5*  ;
}

利点*はすべてのブラウザに適用されます.欠点*親エレメントのスペースが足りない場合、子エレメントが表示されない場合があります(ブラウザウィンドウが縮小する場合、スクロールバーが表示されない場合).サブエレメントにoverflow:autoを設定と、高さが足りない場合にスクロールバーが表示されます.
8)親要素の相対的な位置付け(position:relative)を設定します.子要素は次のcssスタイルです.

.son{
    position:absolute;
    height:  ;
    top:0;
    bottom:0;
    margin:auto 0;
}

利点*単純な欠点*十分なスペースがない場合、サブエレメントは切断されますが、スクロールバーはありません.
まとめ
水平中心は比較的簡単で、8つの方法が提供され、一般的にtext-align:center、marin:0 auto;1 text-align:center;② margin:0 auto; ③ width:fit-content; ④flex⑤ボックスモデル⑥transform⑦⑧2つの異なる絶対位置決め方法
垂直方向を中心として、8つの方法が提供する.①単行テキスト、line-height②行内ブロックレベル要素、display:inline-block、vertical-align:middle;擬似要素を加えて3 vertical-align④flex⑤ボックスモデル⑥transform⑦⑧の2つの異なる絶対位置決め方法を実現
flex,カセットモデル,transform,絶対位置決め,これらの方法は水平中央と垂直中央に同時に適用できることを見出した.
原文住所:http://louiszhai.github.io/2016/03/12/css-center/