关于CSS 水平+垂直居中的问题，开发代码的过程中，会经常遇到。
那么，在这里，我会介绍几种方式，来实现CSS的水平+垂直居中。
首先，我们先将body,html的高度和宽度设置为100%，其次清除默认样式，margin和padding设置为0。
写个宽度和高度均为200px，青色的方块。
<!DOCTYPE html>
水平居中则可以用 margin: 0 auto;来设置。
我们都知道元素平时的默认状态是position = static (静态)。
垂直居中需要使 position = relative ，这样就可以用top 属性，使其移动。
另使用margin-top属性，因为自身是200px高度，所以减去自身一半的高度，就可以垂直居中。
<!DOCTYPE html>
这样就实现垂直居中的效果。
CSS3的transform的属性也可以实现向上偏移的效果。
transform:translateY(-50%) 意思是偏移自身高度的一半。
效果如下：
<!DOCTYPE html>
水平垂直居中
以上两种方法的代码链接。
另外CSS3中还有种方法 FLEX布局，实现水平垂直居中的方法。
/blog//07/flex-grammar.html 阮一峰老师的博客，大家可以看看，对于布局非常有帮助。
<!DOCTYPE html>
