CSS水平垂直居中之绝对定位方法

场景

我们假定页面只有一个div元素，目的是通过CSS属性控制该div元素的水平垂直居中。
因为这篇文章讲述的是绝对定位方法，因此要将div的position设置为absolute。为了让div的水平垂直居中看起来更形象，我们添加border属性。

 .test-div {
    border: 1px solid #0ac2d2;
    position: absolute;
}

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

.absolute-center {
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 150px;
    width: 200px;
}

通过在页面上测试，我们可以得到以下的效果。而且不管浏览器窗口大小怎么变化，这个div元素始终是水平垂直居中的状态。

方法2

方法2更好理解一些，首先给div设定高度和宽度。
由于position设置为absolute;给div设定left和top属性都为50%
最后将div的margin-left和margin-top设置为宽度和高度的一半。
通过以上描述，得到以下的CSS代码。

.absolute-center2 {
    width: 400px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}

通过在页面上测试，我们可以得到以下效果图。而且不管浏览器窗口大小怎么变化，这个div元素始终是水平垂直居中的状态。

方法优点

• 上述两种方法的CSS属性都未曾使用CSS3特性，因此不用担心兼容性问题。
• 两种方法均只需要这一个类，就可实现在任何内容块的水平垂直居中。
• 是否设置padding值对居中效果没有影响

方法缺点

• 元素必须设置高度和宽度，不设置的话将不会有任何效果。
• 由于必须设置高度，相当于定高，因此为了防止内容边界溢出，一般需要设置overflow属性。

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

转载于:https://www.cnblogs.com/xtashao/p/7859836.html