父盒子的大小是不确定的，子盒子的大小也是不确定的。

水平居中

• 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