元素水平垂直居中

1.利用margin属性
margin是外边距属性，可以通过它来调整元素的位置

margin:25% auto;

如图:

好处：简单，而且随着浏览器的大小变化，位置也会跟着变，但看起来总是居中的
坏处：因为设置了margin属性，所以其它元素跟它的距离就会很大。
2.利用left，top加上margin来居住

position: absolute;
 left: 50%;
 top: 50%;
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;

如图：

好处:也是随着浏览器变化而变化，而且它的margin对其它元素的影响比较小.
坏处:比较麻烦.