总结CSS技巧

一、定宽水平居中：

1）使用margin:0 auto;  有良好的兼容性，兼容IE8

2）position:relative;left:50%;margin-left: - 'boxHalf-width'  //boxHalf-width指盒子宽度的一半,

这里position:absolute也是可以的，注意这样父盒子也要给它一个定位属性。

3）padding/margin：0 paddingWidth //paddingWidth指盒子的宽度减去当前盒子宽度除二（简称：padding/margin剩余法）

二、不定宽水平居中：

1）父盒子text-align:center;当前盒子display:inline-block；//会影响父盒子内的文本内容

2）position:relative;left:50%;transform:translateX(-50%)； 不兼容IE8等低版本浏览器

3）父盒子display:table;子盒子display:table-cell;text-align:center 

这里注意：设置了table-ce'l'l后，子盒子尽量避免使用float和position，可能会受影响；同时使用的margin会失效。

三、定高垂直居中：

1）padding/margin剩余法

2）position:relative;top:50%;margin-top:-boxHalf-height //boxHalf-width指盒子高度的一半，

这里要注意：父盒子要处理子盒子的margin-top问题，方式有很多例如，给父盒子overflow:hidden;同样position:absolute也可以，记得父盒子也要给定位属性

四、不定高垂直居中：

1）position:relative;top:50%;transform:translateY(-50%) ; //不兼容IE8等低版本浏览器

2）父盒子display:table;子盒子display:table-cell;vertial-align:middle;//出现的问题跟上面一样

五、单行文本垂直居中：

1）父盒子line-height: boxHeight //boxHeight指父盒子的高度

六、多行~n行文本垂直居中

1）父盒子line-height:boxHeight / n

提示一点：元素可以通过display来设置定宽或者是不定宽，然后变通地采用各种方案

还有很多其他的CSS技巧，flex相关的和一些常见的CSS使用方式。先暂时写这些先。

仅作为自己工作的总结，可能有很多坑或者不完善的地方，谢谢指出，勿喷！

待续中。。。

作者：jie_YJ
链接：https://www.jianshu.com/p/594705c39be2