CSS居中

什么情况下需要居中？
大前提：父元素宽高比子元素大。
故又可为几种情况：

一、父元素宽高未知，子元素宽高未知。
水平居中：
1、父：display: flex; 子：justfify-content:center;
2、父：position: relative; 子：postion: absolute;left:0;right:0;margin:auto;
3、父：position: relative; 子：postion: absolute;left:50%;transform:tranlate(-50%,0);
4、子：margin: 0 auto;
5、父：text-align: center; 子：display: iniline-block / iniline;

垂直居中：
1、父：display: flex; 子：justify-content:center;
2、父：position: relative; 子：postion: absolute;top:0;bottom:0;margin:auto;
3、父：position: relative; 子：postion: absolute;top:50%;transform:tranlate(0,-50%);
4、子：display: inline-block; vertical-align: middle; 辅助子元素：display: inline-block; vertical-align: middle; width: 0; height: 100%; (注意：父元素的高度要比字体大小和行高大)
5、父：display: table-cell; vertical-align: middle; 子：display: block;

水平垂直居中：
1、父：display: flex；子：justfify-content:center;align-item:center;
2、父：position: relative；子：postion: absolute;top:0;bottom:0;left:0;right:0;margin:auto;
3、父：position: relative；子：postion: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
4、父：text-align: center; 子：display: inline-block; vertical-align: middle; 辅助子元素：display: inline-block; vertical-align: middle; width: 0; height: 100%; (注意：父元素的高度要比字体大小和行高大；两个inline-block在一起，代码元素间的空格、换行会被解析为空格)
5、父：display: table-cell; vertical-align: middle; 子：display: block; margin: 0 auto;

二、父元素宽高已知，子元素宽高未知。

水平居中：
6、子：position: relative; left: 50%; transform: translate(-50%,0);

垂直居中：
6:、子：position: relative; top: 50%; transform: translate(0,-50%);

水平垂直居中：
6、子：position:relative; top: 50%; left: 50%; transform: translate(-50%,-50%);

三、父元素宽高未知，子元素宽高已知。

水平居中：
7、子：margin：0 calc((100% - cWidth) / 2 );

垂直居中：
7、子：margin: calc((100% - cHeight) / 2) 0;

水平垂直居中：
7、子：margin: calc((100% - cHeight) / 2) calc((100% - cWidth) / 2 );

四、父元素宽高已知，子元素宽高已知。

水平居中：
8、子：margin: 0 calc( pWidth - cWidth) / 2 );

垂直居中：
8、子：margin: calc( pHeight - cHeight ) / 2 ) 0;

水平垂直居中：
8、子：margin: calc( pHeight - cHeight ) / 2 ) calc( pWidth - cWidth) / 2 );

另：9、margin可以用隐藏节点代替