div上下垂直

实现代码：

   height: 20px;
   width: 20px;
   background: red;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -10px;
   margin-left: -10px;

效果图：

image.png

实现原理：
这里使用了绝对定位[position:absolute]，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-10px;margin-top:-10px;，这里有个技巧是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中。