在进行网页布局时，元素的垂直居中对齐是一个常见需求。表格的垂直居中相对简单，但是在使用非表格元素，如div时，实现垂直居中会稍显复杂。本文将介绍在CSS中实现非表格元素垂直居中的两种主要方法。
我们来了解第一种方法——使用绝对定位。在绝对定位中，我们可以将div元素视为浮于页面之上的独立对象。通过设置top和left属性各为50%，可以将div的左上角定位到页面中心的位置。但这样做的结果是div的左上角位于页面中心，并非其垂直和水平中心居中。为了让div的中心点位于页面的中心，我们需要将div向上和向左都移动其自身尺寸的一半。具体操作是设置负的margin值，即margin-top和margin-left分别为高度和宽度的一半的负值。通过这种方式，可以实现div的垂直和水平居中对齐。
然而，上述方法在处理不定宽高的div时，需要额外嵌套两个div元素。这是因为绝对定位的div是相对于最近的已定位祖先元素进行定位的，如果没有已定位的祖先，那么它是相对于初始包含块定位的。因此，对于不定宽高的div，我们需要创建一个父级div元素并对其应用相对定位，然后将目标div设置为绝对定位。这要求开发者对CSS定位的概念有深入的理解。
第二种方法是使用CSS的display属性。这种方法利用了display属性的table-cell值，该值可以使div表现得像表格单元格一样。通过这种方式，我们可以轻松地实现div的垂直居中。但是，需要注意的是，IE浏览器不支持display:table-cell。为了兼容IE浏览器，我们可以使用display:inline-block结合zoom:1的技巧。在IE浏览器中，zoom:1可以使得inline-block表现得像inline-block一样。为了确保在所有浏览器中的兼容性，我们可以同时使用display:table-cell和display:inline-block，并且对IE浏览器进行特定的hack处理。这样，无论在哪个浏览器中，div都能够实现垂直居中对齐。
总结来说，非表格元素的垂直居中可以通过以下两种主要方法实现：一种是使用绝对定位和负边距，另一种是结合使用display:table-cell和display:inline-block（包括对IE浏览器的特定hack处理）。两种方法各有优劣，开发者可以根据具体的页面布局需求和浏览器兼容性要求来选择最合适的实现方式。在实际开发过程中，对CSS定位和display属性的深刻理解是实现复杂布局的关键。
