要设置行内元素水平居中可以通过父元素设置text-align:center。

三、固定宽度的块级元素水平居中

宽度固定的块级元素一般运用左右margin值为auto来实现。

注意：用左右margin值为auto实现的水平居中一定要设置宽度！设置宽度。

四、固定宽度的块级元素水平居中——绝对定位

http://s11/mw690/003xds7Kzy7iQegNYi60a&690
五、宽度不确定的块状元素水平居中——绝对定位+transform。translateX可以移动本身元素的50%。

http://s5/mw690/003xds7Kzy7iQesk0f204&690
六、宽度不确定块状元素水平居中(因为table是个块状元素，可设置宽度也可以不设置宽度)——把块状元素改为display:table元素，设置左右margin实现水平居中

七、宽度不确定行内块状元素水平居中——相对定位。只要父元素是行内块状元素，这个地方可以用float或者display把父元素变成行内块状元素。

http://s4/mw690/003xds7Kzy7iRppdItR33&690
原理：

http://s4/mw690/003xds7Kzy7iRpDIPgnf3&690

 八、宽度不确定块状元素水平居中。flex——父元素用display:flex，子元素用align-self:center

http://s7/mw690/003xds7Kzy7iQeZJzbE06&690
九、宽度不确定，块状元素水平居中width:fit-content+margin:0 auto;

fit-content，可以实现元素收缩效果的同时，保持原来的block水平状态。就可以直接使用margin:auto实现元素向内自适应同时居中的效果。
width:fit-content是css3的新知识，

参考资料学习

http://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/

http://blog.csdn.net/xubingnan123/article/details/78837498

十、定宽块状元素水平居中——position:absolute+left+top+right+bottom+margin:auto

http://s12/mw690/003xds7Kzy7iQhH6w3hab&690
十一、固定宽度的块状元素水平居中——固定定位

http://s1/mw690/003xds7Kzy7iRBuaEpy00&690
十二、不定宽高元素水平居中——固定定位+transform

http://s5/mw690/003xds7Kzy7iRBB38JC04&690
十三、定宽块状元素水平居中——position:fixed+left+top+right+bottom+margin:auto

http://s9/mw690/003xds7Kzy7iRBJHFag38&690