父盒子的大小是不确定的，子盒子的大小也是不确定的。
水平居中
- inline-block+text-align
text-align:center设置在一个块级元素上时，会对内面的inline级别的元素起作用，但是text系列是会继承下去的，所以如果child内面的文本有多行，那么也会水平居中的，可以单独给child设置text-align:left恢复默认的左对齐。
水平居中.png
- table+margin
table在没有设置宽度100%时，他的宽度就是和内容一样宽的。
水平居中2.png
- absolute+transform
水平居中3.png
-
flex+justify-content
水平居中4.png
水平居中4-2.png
垂直居中
- table-cell+vertical-align
垂直居中1.png
- absolute+transform
垂直居中2.png
- flex+justify-content
在父元素为flex时，子元素不设置高度，那么在垂直方向上就是stretch
垂直居中3-1.png
设置垂直居中后
垂直居中3-2.png
水平垂直居中
- inline-block+text-align+table-cell+vertical-align
居中1-1.png
居中1-2.png
- absolute+transform
居中2.png
- flex+justify-content+align-items
居中3.png
