CSS实现元素垂直居中

joywek 发布于2019-08-01 14:50 / 2173人阅读

摘要：实现元素垂直居中对元素的垂直居中针对于单行元素和多行元素将分情况讨论。三父元素高度确定的多行文本多行文本，图片，块级元素皆属于这种情况，对此的垂直居中主要有两种方法。插入对要垂直居中的元素外插入包括标签，同时设置。

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。

云服务器 GPU云服务器实现垂直居中垂直居中水平垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49616.html

【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Scholer 2019-08-02 16:14 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

mayaohua 2019-08-29 18:44 评论0 收藏0
CSS/CSS3 实现居中（水平&垂直）

摘要：，水平居中行内元素把行内元素放在一个属性块元素中，然后设置父层元素属性居中，水平居中块状元素设置外边距，水平居中多个块状元素把块状元素属性，然后设置父层元素属性居中，水平居中多个块状元素布局实现把块状元素的父元素属性和，如下设置， 1，水平居中：行内元素把行内元素放在一个属性块（display：block）元素中，然后设置父层元素属性居中： .test { text-align:ce...

genedna 2019-08-02 15:27 评论0 收藏0