鲁达 前言
对于使用css属性使得元素水平垂直居中问题，基本是在前端面试问题中必问的一个问题。由于这个问题的回答要分好几种情况，我也会写几篇文章分别讲述。
今天这篇文章我们首先看看，只有一个元素的时候采用绝对定位如何实现水平垂直居中的。
我已经将代码放到github上，感兴趣的同学可以去看看。
CSS
场景
我们假定页面只有一个div元素，目的是通过CSS属性控制该div元素的水平垂直居中。
因为这篇文章讲述的是绝对定位方法，因此要将div的position设置为absolute。为了让div的水平垂直居中看起来更形象，我们添加border属性。
通用属性
接下来我们看看两种实现方法吧。
方法1
在方法1中，我们首先需要使用margin: auto;在普通内容流中，margin: auto;相当于margin-top:0;margin-bottom:0。
其次因为div已经被设置为absolute，脱离文档流，因此可以方便设置left，top，right，bottom四个值。
将left，top，right，bottom四个之都设置为0，浏览器会重新分配一个边界框，这样整个元素就会填充body所有可用空间。
为了让元素能呈现水平垂直居中的状态，必须给div元素设置高度和宽度，添加height和width属性。
通过以上描述，我们可以得到以下的CSS属性。
css属性
通过在页面上测试，我们可以得到以下的效果。而且不管浏览器窗口大小怎么变化，这个div元素始终是水平垂直居中的状态。
方法1效果图
方法2
方法2更好理解一些，首先给div设定高度和宽度。
由于position设置为absolute;给div设定left和top属性都为50%
最后将div的margin-left和margin-top设置为宽度和高度的一半。
通过以上描述，得到以下的CSS代码。
CSS代码
通过在页面上测试，我们可以得到以下效果图。而且不管浏览器窗口大小怎么变化，这个div元素始终是水平垂直居中的状态。
方法2效果图
方法优点
上述两种方法的CSS属性都未曾使用CSS3特性，因此不用担心兼容性问题。
两种方法均只需要这一个类，就可实现在任何内容块的水平垂直居中。
是否设置padding值对居中效果没有影响
方法缺点
元素必须设置高度和宽度，不设置的话将不会有任何效果。
由于必须设置高度，相当于定高，因此为了防止内容边界溢出，一般需要设置overflow属性。
方法的优点很明显，效果也很容易达到；但是方法缺点也是很明显的，因为有很多元素都未必是定高和定宽的。总的来说还是应该看看实际应用场景。
结束语
今天这篇文章只是讲解了，使用绝对定位让元素水平垂直居中。后面会继续讲解其他元素水平垂直居中的情况，敬请期待吧。