1.怎么让一个不定宽高的 DIV，垂直水平居中?
1.使用Flex
只需要在父盒子设置：display: flex; justify-content: center;align-items: center;
2.使用 CSS3 transform
父盒子设置:display:relative
Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;
PS:translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.
当使用top: 50%;left: 50%;时，是以元素的左上角为原点，但不是元素的中心位置。
translate(-50%，-50%)是往左、往上移动自身长宽的50%，使元素处于中心位置。
与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中.
但是兼容性不是很好：Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
ie9以下不能使用，所以在使用时要考虑浏览器版本问题.
translate的语法：
3.使用 display:table-cell 方法
父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
Div 设置: display:inline-block;vertical-align:middle;
2.box-sizing是什么？
设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和padding，宽度是可见区域的大小。
box-sizing属性可以为三个值之一：
content-box，默认值，只计算内容的宽度，border和padding不计算入width之内
padding-box，padding计算入宽度内
border-box，border和padding计算入宽度之内
3.px，em，rem 的区别
px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算 机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置， 则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小， 但相对的只是 HTML 根元素。
4.line-height1.5和line-height:150%的区别
一、区别
区别体现在子元素继承时，如下：
父元素设置line-height:1.5会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。
父元素设置line-height:150%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。
二、举例
比如父元素设置属性：font- size:14px;line-height:1.5,child设置font-size:26px;
那么父元素：line-height = 14px * 1.5 = 21px，子元素：line-height = 26px * 1.5 = 39px。
父元素设置属性：font-size:14px;line-height:150%,child设置font-size:26px;
那么父元素：line-height = 14px * 150% = 21px，子元素：line-height = 父元素的line-height = 21px。