css-水平垂直居中方法

水平垂直居中方法

1. 水平居中

   text-align：center；
   
   使用注意：
   	a.文本
   	b.行内元素：span、a
   	c.行内块元素：input、img
   	d.如果需要让以上元素水平居中，此时直接在以上元素的父元素设置即可
   

   margin：0 auto；
   
   使用注意：
   	a.块级元素
   	d.直接给当前元素设置
   
   

   left：50%；transform：translateX（-50%）
   
   使用注意：
   	a.定位：子绝父相
   	d.给子元素设置
   

2. 垂直居中

   line-height
   
   使用注意：
   	a.单行文本
   	d.line-height = 盒子的高
   

3. 水平垂直居中

   left：50%；top： 50% ；transform：translate（-50%，-50%）
   
   使用注意：
   	a.定位：子绝父相
   	d.给子元素设置
   
   

   flex布局：
   
   display： flex；
   justify-content： center；
   align-item： center；