CSS：元素居中的方式

水平居中

• 文字的水平居中
  1.使用text-aline:center;就能实现
• 元素的水平居中
  1.块元素的水平居中设置宽高，对子元素设置margin:0 auto;就能实现
  2.行内元素以及行内复合元素的水平居中，行内元素以及包含inline的元素设置text-aline:center;即可实现水平居中。img是inline-block元素
  3.flex中的水平居中(主轴居中，flex-deraction:row;)，使用justify-content:center;

垂直居中

• 文字的垂直居中
  1.单行文字定义line-height和height相等就可以实现垂直居中
  2.多行文字居中可以使用span把文字包起来，然后给span设置inline-block，然后在span的父元素设置vertical-aline:middle;
• 块元素的垂直居中
  1.（垂直水平都居中）父元素添加position:relative;子元素使用position:absolute;top:50%;left:50%;margin-top:'父元素height一半的负值';
  margin-left:'父元素width一半的负值'
• 行内块元素垂直居中
  1.父元素设置display:table-cell;vertical-aline:middle;子元素设置vertical-aline:middle;即可实现垂直居中
• 对于flex布局的元素，(水平方向)，在父元素使用aline-items:center;即可