CSS布局之垂直居中一

CSS中的水平居中是非常容易实现的，比如对于行内元素，将它的父级元素设置text-align为center既可。

对于块级元素，设置它的margin:auto即可

但是，对于设置垂直居中来说，操作就没那么简单了。

不同情况要不同应对。一般我们可以有三种思路的解决方案。

今天我们先来讨论利用绝对定位解决垂直居中的思路。

如上，在能已知元素宽高的情况下，利用绝对定位将左上角定位到父级元素正中心，注意父级元素应设置“定位”，不然按照绝对定位的性质，元素会依次找寻其他已“定位”的祖先元素定位（实在没有其他定位的祖先元素会定位到视窗的正中心）。然后在通过设置margin-top与margin-left为负值，移动元素到正中心。

当然，我们可以利用CSS3中的clac()方法减少两行代码，效果是一样的。

以上方法是基于元素的宽高都固定。但在大部分情况中，元素的宽高都是随着父元素的变化而变化。对于不固定宽高的情况，我们又该如何处理呢？

解决办法是利用CSS3的transform属性的translate方法，以本元素自身为基准进行计算和移动 。

本期我给大家介绍了基于绝对定位方式实现垂直居中效果。下期我们讨论另外两种方法。