注意!flex布局代码抄了几个博客也没成功水平居中，也许css深入浅出有答案

垂直居中的实现方式

• line-height方法

适合单行文字的垂直居中，只需要将包含文字元素的容器行高设置为大于字体大小并且等于元素的高度

Paste_Image.png
img图片也可以用line-height垂直居中
包含图片的父元素设置line-height,img设为verticla-align: middle。
Paste_Image.png

• vertical-aligh方法
  vertical-align:middle这个属性是对table元素垂直居中起作用。他只对table-cell和行内元素起作用，vertical-aligh的值相对于其父元素。也就是说父元素也必须是行内元素。
  Paste_Image.png

同样还有将父元素转化为table属性结合上文实现垂直居中

Paste_Image.png

• 绝对定位

• -margin方法
  父容器宽高不固定，子元素需要在父亲内容绝对居中的时候，可以用绝对定位+负边框。
  

  Paste_Image.png

• padding方法
  设置上下padding相等实现垂直居中，但是父容器不能设置高度
  

  Paste_Image.png

• flex+`aling-items

水平居中的实现方式

• TAC方式
  行内内联元素：span,a,img,input,label 设置 text-align:center；同样适用于display:inline-block的元素
  Flex布局 设置display:flex;justify-content:center;(灵活运用)

• flex布局(可能写错了或者遗漏了其他写法）
  行内元素运用flex时，设置display:flex;justify-content:center;
  

  image.png

• 块级元素设置margin：0 auto;
  夫元素必须指定width和height;
  image.png