css3绝对定位垂直居中,CSS经典面试题-水平垂直居中之绝对定位方法

前言

对于使用CSS属性使得元素水平垂直居中问题，基本是在前台面试问题中必问的一个问题。因为这个问题的答复要分好几种情况，我也会写几篇文章分别讲述。

今天这篇文章我们首先看看，只有一个元素的时候采用绝对定位如何实现水平垂直居中的。

我已经将代码放到github上，感兴趣的同学可以去看看。https://github.com/zhouxiongking/article-pages/blob/master/articles/position-center/position-absolute-center.html

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属性。

方法的优点很显著，效果也很容易达到；但是方法缺点也是很显著的，由于有很多元素都未必是定高和定宽的。总的来说还是应该看看实际应用场景。

结束语

今天这篇文章只是讲解了，使用绝对定位让元素水平垂直居中。后面会继续讲解其余元素水平垂直居中的情况，敬请期待吧。