div的垂直居中

div在html中的横向居中可以采用margin：auto的方式来居中；但是在 竖直方向上市无法这样做的；主要原因因为屏幕横向距离是固定值，但是竖向为非固定数值（因为增加内容而改变）。但是可以采用这种方法来进行居中，同时也可用于某些因素下margin：auto失效后进行横向水平居中，具体方法就是首先定位距离顶部百分之50（这时div的顶部位于中心线上）；然后向顶部缩进自身高度的一半（这时div的中心位于中心线上），则达到了居中目的（水平方向则反过来距离左边，缩进宽度一半）

html,body{
height: 100%;
padding: 0;
margin: 0;
}
div{
height: 40px;
width: 150px;
position:relative;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -75px;
}