CSS面试高频题（一） 元素垂直水平居中

行内元素

• 行内元素居中，两种方式如下：

 .parent{text-align:center; } // 1.父元素的text-align属性
 .son{margin:0 auto;}    //2.子元素设置左右maigin 为auto
 ​
 //设置父元素高度和文本行高相同，垂直居中
 .parent{height:20px}
 .son{line-height:20px} 

块级元素：未知大小的盒子水平垂直居中：

1. 通过transform属性的translate（x,y）方法，可以使得元素水平垂直居中：

    .son{
     position:absolute;
     left:50%;
     right:50%;  以上先将div的左上角移到父元素的中心，再：
     transform:translate(-50%,-50%) //将div按照自身的长宽，向左向上移动50%
    }
   

2. 通过flex的弹性盒子布局，设置弹性盒子的display为flex，弹性元素在主轴和交叉轴上都居中：

    .parent{
     display:flex;
     justify-content:center  
     align-items:center
    }
   

新人刚开始写文章，如有不当之处请在评论区指出。