css 非表格垂直对齐效果代码

Div的定位与DISPLAY方式

在网页设计中，我们经常需要深入理解并应用定位与DISPLAY的概念，它们对于实现页面元素的精确布局至关重要。接下来，让我们一起相对定位和绝对定位以及不同的DISPLAY方式的应用。

让我们关注一个固定宽高的Div如何实现垂直居中。代码示例如下：

`div { position:absolute; top:50%; left:50%; width:px; height:px; margin:-200px 0 0 -200px; border:1px solid 000000; }`

在这个例子中，绝对定位（position:absolute）使得div元素可以脱离文档流，被视为漂浮在页面上。通过设置top和left属性为50%，我们可以将div的左上角置于页面的中心。这只是水平和垂直方向的中心定位，要使div的中心点完全位于页面中间，我们需要使用负边界。这里的负值是高度和宽度的一半，以实现真正的居中效果。

HTML代码：

`

CSS代码：

`div1, div2 {display:table-cell; display: inline; zoom:1; vertical-align:middle;}`

在这段CSS代码中，property是一个仅IE（包括IE7）能的hack。使用zoom:1后，元素的行为就像display:inline-block。需要注意的是，对于a、span等非block元素，可以直接使用display:inline-block进行布局。至于为何选择inline而不是inline-block，这与IE的特殊工作方式有关，这里不再赘述。只需理解在特定的情境下，这两种方式都能达到垂直居中的效果。

理解和熟练掌握定位与DISPLAY的概念和技巧，是网页设计师必备的技能之一。通过对这些知识的运用，我们可以实现各种复杂的页面布局和设计，带给用户更好的视觉体验。