水平居中和垂直居中

水平居中的方法：

1居中元素宽度已知，可以用margin：0 auto；

2宽度未知，父元素text-align：center配合居中元素display：inline-block；

3绝对定位left：50%；transform：TranslateX（-50%）或者margin-left：-n px；（需要知道居中元素的宽）；

4flex布局方法（简单写法就是父元素display:flex;justify-content:center;）

 

垂直居中的方法：

1 绝对定位top：50%；transform：Translate Y（-50%）；

2 绝对定位top：50%；margin-top：-n px；（需要知道居中元素的高）

3绝对定位 top:0; bottom:0; margin:auto;

4给父元素设置一样的上下padding

5设置line-height等于height可以使一些行内元素居中

6父类display:table,居中元素display：table-cell；vertical-align: middle;

7flex布局 （简单写法就是父元素display:flex;align-items:center;）

伸缩布局flex拓展：

flex存在一个主轴（默认x轴）一个副轴

可由flex-direction来设置 row（默认的→）row-reverse（←）column（↓）column-reverse（上）

主轴对其方式 justify-content：flex-start/end center space-round(平分) space-between（两端对其）

副轴对其方式 align-items： flex-start/end center baseline stretch（撑满）