CSS居中深入理解

水平居中

child是block元素：

1. child宽度不确定
   child左右margin相同即可
2. child宽度确定
   margin-left: auto;
   margin-right: auto;
   child是inline元素：父元素设置text-align: center;

垂直居中

1. parent高度不确定由child撑起：
   不管child高度确不确定，只要parent的padding-top和padding-bottom相同即可
2. parent高度确定（避免出现这种情况，这种情况只有代码写得很烂才会出现）：
   flex实现垂直居中（chrome和手机端）、table或div模拟table实现垂直居中（IE浏览器）。
   实现垂直居中的七种方法