CSS/CSS 3は中央(水平&垂直)を実現

1、水平方向中央:行内要素
行の要素を属性ブロック(display:block)要素に配置し、親要素の属性を中央に設定します.
.test {

text-align:center;

}
2、水平方向中央:ブロック要素
がいぶきょりを設ける
.test {

margin: 100px auto;

}
3、水平方向中央:複数のブロック要素
ブロック要素プロパティ(display:inline-block)を設定し、親要素プロパティを中央に設定します.
.test {

text-align:center;

}
4,水平中央:複数のブロック要素(flexboxレイアウト実装)
ブロック要素の親要素属性display:flexとjustify-content:centerを、次のように設定します.
.test {

text-align:center;

}
5、垂直方向中央:1行の行内要素
heightプロパティとline-heightプロパティの設定
.test {

height: 100px;
line-height:100px; 

}
6、垂直方向中央:複数行の行内要素
中央に配置する親要素にdisplay:table-cellおよびvertical-align:middleプロパティを設定する
.test {

background: red;
width: 200px;
height: 200px;
/*          */
display: table-cell;
vertical-align:middle;

}
7、垂直方向中央:高さが既知のブロック要素
中央に配置する要素に次の属性を設定します.
.test {

top: 50%;
margin-top: -50px;  /* margin-top          */
position: absolute;
padding:0;

}
8、水平垂直方向中央:高さと幅が既知の要素
中央に配置する要素に次の属性を設定します.
(1).test {

position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;

}(2) .test{

position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;  /*   margin-left / margin-top          */
margin-left: -75px;

}
9、水平垂直方向中央:不明な高さと幅の要素
中央に配置する要素に次の属性を設定します.
.test {

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);  /*   css3 transform    */

}
10、水平垂直中央:使用可能flex
次のプロパティを設定します.
.test {

 display: flex;
justify-content:center;
align-items: center;
/*                     */
background: #AAA;
height: 300px;

}