水平和垂直居中问题

已知容器大小和内容大小

已知容器和内容大小的情况。其中水平居中很简单，只需要将text-align属性设置为center就好（或者用margin的auto属性），主要问题在垂直方向上。因为已知容器和内容的大小，所以实现垂直居中的方法也会相对多一点。

例：在宽高为300px的div元素中，包含一个宽高都是300px的图片

使用父元素padding属性来实现垂直居中，代码如下：

效果如下：

说明：根据盒模型水平和垂直方向上的宽度计算方法，此时，父元素的宽度是50px+300px+50px，为400px。同样高度也是400px。图片距离父元素的举例均为50px，实现了图片的水平和垂直居中。

同样的道理，使用图片的margin属性，也可以实现图片的水平和垂直居中。代码如下：

说明：该样式和上一样式的区别在于，上一样式的父元素所占的空间，宽度和高度都是400px。而此样式图片元素占有的空间，高度和宽度是400px。

未知容器大小，已知内容大小

未知容器大小，知道内容大小的情况。合理的方法是使内容能够在垂直方向上处于父元素高度50%的位置。

代码如下：

效果如图：

从图中可以看到，图片元素并没有处于垂直高度的50%位置。其原因在于，相对定位中，图片移动的计算方式是按照上边线来计算的，即此时图片的上边线处于父元素垂直高度的50%位置。为了修正这个差异，可以使用负边界的方法将图片元素向上移动自身高度一半的距离。

基于以上分析，在样式中加入如下代码：

如此一来，就修正了由于上边线垂直居中所产生的差异。此时，即使更改父元素的高度，图片元素依然可以垂直居中。

已知容器大小，未知内容大小

已知容器的大小，未知内容大小的情况。代码如下：

效果如图：

说明：该样式使用的原理是，定义line-height的高度等于容器的高度。

容器大小以及内容大小都未知

容器大小，内容大小都未知的情况。代码如下：

效果如图：

说明：该样式中，通过定义元素的display属性来实现。使用display属性，定义元素的属性为table，这样元素就有了表格的特性，然后再定义子元素的属性为table-cell，这样子元素就具有了表格中单元格的属性。因为在表格的单元格中，可以用vertical-align属性定义内容的垂直居中。

修饰图片的水平和垂直居中

以上讨论的是当图片作为内容时的居中方法。如果图片作为修饰部分出现，居中问题就很好解决。代码如下：

说明：因为图片是作为修饰部分出现，所以应该出现在css中。此时图片作为元素的背景，因此只需要定义背景的位置为center，即可实现图片的居中。

效果如图：

以上内容都经过本人的测试，或许会有理解错的地方，欢迎批评指正。