html中垂直居中有几种?怎么实现?

html-css018

html中垂直居中有几种?怎么实现?,第1张

html垂直居中有4中方法。

分别有:使用line-height;使用表格;利用display:table-cell;使用绝对定位。

具体实现方法:

使用line-height

把文字的line-height设为文字父容器的高度,适用于只有一行文字的情况。可以让文字在父元素内垂直居中。

使用表格

在IE6、7中我们可以使用vertival-align:middle来对表格里的元素进行垂直居中.

利用display:table-cell

对于那些不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格实现垂直居中了。

使用绝对定位实现

绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的,而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离,所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置,这个负的margin值就取元素宽度或高度的一半。

注意:此法只适用于那些我们已经知道它们的宽度或高度的元素。否则margin负值的调整无法精确。

html两个列表垂直显示方法浮动第一级lis(以避免“浮动div”),或使用display。

列表布局是项目开发中最常用的一种布局方式,我们可以通过ListView来定义列表项,支持垂直和水平方向展示。