欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS实现元素垂直居中_html/css_WEB-ITnose

程序员文章站 2022-05-13 09:22:11
...
CSS实现元素垂直居中

对元素的垂直居中针对于单行元素和多行元素将分情况讨论。

一、父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
HTML结构:

Hello World!!!

CSS样式:

二、父元素高度不确定的多行文本

对于父元素高度不确定的文本、图片等的块级元素的竖直居中可以设置相同的上下内边距(padding值)即可实现居中,这个数值不必过大。

三、父元素高度确定的多行文本

多行文本,图片,块级元素皆属于这种情况,对此的垂直居中主要有两种方法。

1.插入 table

对要垂直居中的元素外插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
另需注意,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。
HTML结构:

  

Hello World!!!

Hello World!!!

Hello World!!!

Hello World!!!

Hello World!!!

CSS样式:

table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

2.设置块级元素的 display 为 table-cell

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
HTML结构:

Hello World!!!

Hello World!!!

Hello World!!!

Hello World!!!

Hello World!!!

CSS样式:

这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。