CSS完美实现垂直居中的方法及优缺点

本文和大家重点讨论一下CSS实现***垂直居中的方法和优缺点，在CSS中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，另外凡是table布局可以实现的，CSS一定可以实现。CSS可以实现的，table未必能做到。

创新互联公司-专业网站定制、快速模板网站建设、高性价比互助网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式互助网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖互助地区。费用合理售后完善，10余年实体公司更值得信赖。

CSS实现***垂直居中

在CSS中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，不一定要拘泥于和table布局一样。不过最近有人问了几个例子，看来对此的需求还不少。

首先，要有一个概念：凡是table布局可以实现的，CSS一定可以实现。CSS可以实现的，table未必能做到。

现在来几个例子：

单行内容的居中

只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置line-height和height，并使两值相等，再加上over-flow:hidden就可以了。

viewplaincopytoclipboardprint?

 
 
 
 
    
  
  
  
  
  1. .middle-demo-1{ 
    2. 
  
  
  
  
  2. height:4em; 
    3. 
  
  
  
  
  3. line-height:4em; 
    4. 
  
  
  
  
  4. overflow:hidden; 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. .middle-demo-1{ 
    7. 
  
  
  
  
  7. height:4em; 
    8. 
  
  
  
  
  8. line-height:4em; 
    9. 
  
  
  
  
  9. overflow:hidden; 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11.

优点：

1.同时支持块级和内联极元素

2.支持所有浏览器

缺点：

1.只能显示一行

2.IE中不支持等的居中

要注意的是：1.使用相对高度定义你的height和line-height2.不想毁了你的布局的话，overflow:hidden一定要。

为什么？请比较以下两个例子：

viewplaincopytoclipboardprint?

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3. Arial,sans-serif;height:24px;width:370px;">
    4. 
  
  
  
  
  4. Loremipsumdolorsitamet,consectetueradipiscingelit. p>
    5. 
  
  
  
  

    6. 
  
  
  
  

    7. 
  
  
  
  
  7. 
  
  
  
  
  8. 
  
  
  
  
  9. Arial,sans-serif;height:2em;width:370px;overflow:hidden;">
    10. 
  
  
  
  
  10. Loremipsumdolorsitamet,consectetueradipiscingelit. p>
    11. 
  
  
  
  
  11. 
  
  
  
  
  12. 
  
  
  
  
  13. Arial,sans-serif;height:24px;width:370px;">
    14. 
  
  
  
  
  14. Loremipsumdolorsitamet,consectetueradipiscingelit. p>
    15. 
  
  
  
  

    16. 
  
  
  
  

    17. 
  
  
  
  
  17. 
  
  
  
  
  18. 
  
  
  
  
  19. sans-serif;height:2em;width:370px;overflow:hidden;">
    20. 
  
  
  
  
  20. Loremipsumdolorsitamet,consectetueradipiscingelit. p>
    21. 
  
  
  
  
  21.

上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。#p#

多行内容居中，且容器高度可变

也很简单，给出一致的padding-bottom和padding-top就行

viewplaincopytoclipboardprint?

 
 
 
 
    
  
  
  
  
  1. .middle-demo-2{ 
    2. 
  
  
  
  
  2. padding-top:24px; 
    3. 
  
  
  
  
  3. padding-bottom:24px; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. .middle-demo-2{ 
    6. 
  
  
  
  
  6. padding-top:24px; 
    7. 
  
  
  
  
  7. padding-bottom:24px; 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9.

优点：

1.同时支持块级和内联极元素

2.支持非文本内容

3.支持所有浏览器

缺点：容器不能固定高度

把容器当作表格单元

CSS提供一系列diplay属性值，包括display:table,display:table-row,display:table-cell等，能把元素当作表格单元来显示。这是再加上vertical-align:middle,就和表格中的valign="center"一样了。

viewplaincopytoclipboardprint?

 
 
 
 
    
  
  
  
  
  1. .middle-demo-3{ 
    2. 
  
  
  
  
  2. display:table-cell; 
    3. 
  
  
  
  
  3. height:300px; 
    4. 
  
  
  
  
  4. vertical-align:middle; 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. .middle-demo-3{ 
    7. 
  
  
  
  
  7. display:table-cell; 
    8. 
  
  
  
  
  8. height:300px; 
    9. 
  
  
  
  
  9. vertical-align:middle; 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11.

可惜IE不支持这些属性，不过在其他浏览器上显示效果非常***。要注意的是：和一个合法的元素必须在

优点：不用说了吧，就是表格，效果和表格一模一样

缺点：IE下无效#p#

用IE的bug解决IE中的绝对居中

先不得不说一句，IE真的是个很烂的浏览器，CSS1中的定义都不支持，害得要我们转个大圈子来造居中。不过就像我说的，凡是table布局可以实现的，CSS一定可以实现，即使在IE里也不例外。我研究IElayout模式多年，还是找出了一个可以在IE中绝对居中的方法。这个方法就是基于IElayout的bug，也可以算以毒攻毒。至于原理，不要问我，这是独门秘学，何况三言两语也讲不清楚，只要好用就行。

viewplaincopytoclipboardprint?

 
 
 
 
    
  
  
  
  
  1. .middle-demo-4{ 
    2. 
  
  
  
  
  2. height:300px; 
    3. 
  
  
  
  
  3. position:relative; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. .middle-demo-4div{ 
    6. 
  
  
  
  
  6. position:absolute; 
    7. 
  
  
  
  
  7. top:50%; 
    8. 
  
  
  
  
  8. left:0; 
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10. .middle-demo-4divdiv{ 
    11. 
  
  
  
  
  11. position:relative; 
    12. 
  
  
  
  
  12. top:-50%; 
    13. 
  
  
  
  
  13. left:0; 
    14. 
  
  
  
  
  14. } 
    15. 
  
  
  
  
  15. .middle-demo-4{ 
    16. 
  
  
  
  
  16. height:300px; 
    17. 
  
  
  
  
  17. position:relative; 
    18. 
  
  
  
  
  18. } 
    19. 
  
  
  
  
  19. .middle-demo-4div{ 
    20. 
  
  
  
  
  20. position:absolute; 
    21. 
  
  
  
  
  21. top:50%; 
    22. 
  
  
  
  
  22. left:0; 
    23. 
  
  
  
  
  23. } 
    24. 
  
  
  
  
  24. .middle-demo-4divdiv{ 
    25. 
  
  
  
  
  25. position:relative; 
    26. 
  
  
  
  
  26. top:-50%; 
    27. 
  
  
  
  
  27. left:0; 
    28. 
  
  
  
  
  28. } 
    29.

整合三和四，写出支持所有浏览器的垂直居中容器！

思路是利用IE和非IE浏览器的CSShack,整合三和四的CSS，写出兼容主流浏览器的垂直居中容器。具体代码就不给出了，大家权当作练习练习。例子可以在下面的附录中找到。

最终实测支持的浏览器：IE6+,Mozilla1.7,NetscapeNavigator8,Opera8.0+,Firefox1.0+和Safari1.0+IE5下需要加上对合适模型的补正。

推测支持的浏览器：Mozilla1.5+,NetscapeNavigator7+,Opera7+未测试浏览器：Konqueror

责任编辑：佚名
来源： nowamagic.net CSS 居中
分享到微信

微信扫码分享

分享到微博 相关推荐
实现
CSS
垂直
居中
的五大
方法
及
优缺点 利用CSS来实现对象的垂直居中有许多不同的方法，本文向大家介绍一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。

2010-08-26 11:27:35

CSS 居中
CSS单行内容
居中
实现
及
优缺点 要实现CSS单行内容居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，不一定要拘泥于和table布局一样。

2010-09-13 17:43:59

CSS单行内容居中
完美
实现
CSS页面
居中
方法揭秘 你对CSS页面居中的方法是否了解，这里和大家分享一下，我们常用的margin:0auto;方法，这个方法是大家用的最多的方法，使用的时候必须为容器指定宽度，另外向大家介绍几种特殊的方法。

2010-08-31 15:07:45

CSS 居中 5种
方法解决
CSS
实现
垂直
居中问题 利用CSS来实现对象的垂直居中有许多不同的方法，本文向大家介绍一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。

2010-08-27 10:30:16

CSS 垂直居中
CSS中
实现DIV容器
垂直
居中
方法揭秘 CSS布局中水平居中比垂直居中简单些，因为我们设计页面的时候往往水平宽度都是固定的，所以我们有必要总结一下在页面布局过程中实现垂直居中的方法。

2010-09-02 13:03:38

CSS 垂直居中
CSS Sprites对
CSS布局
的意义
及
优缺点 你对CSSSprites图片切割术的概念和用法是否了解，这里向大家描述一下CSSSprites对CSS布局的意义、优点和缺点，希望本文介绍对你有所帮助。

2010-09-02 09:59:52

CSS Sprites CSS
CSS Sprites工作原理
及
优缺点 本文向大家描述一下CSSSprites工作原理及优缺点，CSSSprites技术早在2005年CSSZengarden的园主DaveShea就在ALA发表对该技术的详细阐述。

2010-08-27 09:45:49

CSS Sprites VLAN划分
方法
及
优缺点 基于端口的VLAN的划分是最简单、有效的VLAN划分方法，它按照局域网交换机端口来定义VLAN成员。

2012-05-03 09:58:19

VLAN VLAN划分
CSS
实现元素水平
垂直
居中
的 N 种方式 可用verticalalign属性,而verticalalign只有在父层为td或者th时,才会生效，对于其他块级元素,例如div、p等，默认情况是不支持的。

2021-07-26 08:31:17

算法
CSS
实现文本
垂直
居中
的三种情况 本文向大家介绍一下如何使用CSS实现一行或多行文本垂直居中，在单元格中，默认就是垂直居中的，而进行CSS网页布局，这样的形式改变了，文字默认是居于容器顶部。

2010-08-24 14:47:48

CSS 居中
CSS
实现水平
垂直
居中
的1010种方式（史上最全） 本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个github仓库，欢迎大家star。

2018-09-18 11:20:07

css html5 javascript 两大
方法
实现DIV
垂直
居中 本文向大家介绍一下DIV垂直居中的几种方法，主要包括单行DIV垂直居中和多行未知高度文字的DIV垂直居中两大部分内容，希望本文介绍对你有所帮助。

2010-08-16 16:07:30

DIV垂直居中 页面中使用
CSS
垂直
居中
的技巧 这里向大家描述一下DIV和CSS实现页面垂直居中的方法，包括单行CSS垂直居中，多行未知高度文字的CSS垂直居中以及多行文本固定高度的居中等内容。

2010-09-09 10:23:23

DIV CSS垂直居中
CSS水平
居中和
垂直
居中多种解决方案 你对CSS中居中的概念和方法是否熟悉，这里向大家描述一下CSS中水平居中和垂直居中的多种解决方案，主要包括单行垂直居中，层水平居中，div层垂直居中等内容。

2010-09-01 10:49:57

CSS 水平居中 垂直居中 八种
CSS
实现内容
居中
的
方法 关于CSS实现内容居中的方式有很多种，在今天这篇文章里，我给大家整理了8种实现内容居中的方式，希望这些方法对你学习和使用CSS进行开发有帮助。

2022-12-20 15:17:29

CSS 开发
CSS Sprites简介以及
优缺点 CSSSprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。

2010-08-26 10:21:06

CSS Sprites 在React中
实现条件渲染
的5种
方法
及
优缺点 随着现代Web应用的重量从后端转移到前端，我们不得不花更多的时间去考虑性能优化。在实现条件渲染时也是如此。

2020-05-26 11:39:05

Web React 组件 探究
CSS+DIV布局
的
优缺点 本文向大家描述一下CSS+DIV框架的优缺点，CSS框架为你的项目提供一个干净、严谨的基础架构，通过CSS+DIV框架你可以快速的为你的站点搭建基础的html代码框架。

2010-08-24 09:05:20

CSS+DIV DIV+
CSS布局技术
的
优缺点 本文向大家介绍一下采用DIV+CSS布局技术的好处与坏处，采用DIV+CSS好处和坏处各有三个，相信本文介绍一定会让你有所收获。

2010-08-23 10:50:39

DIV+CSS 解决DIV列高度自适
方法
及
优缺点 解决DIV列高度自适的方法有很多种，这里介绍三种最常用的方法以及优缺点给大家，相信本文介绍一定会让你有所收获。

2010-08-26 15:08:08

DIV 高度

相似话题

后端
25876内容
开发工具
7174内容
测试
482内容
游戏开发
648内容
全部话题

同话题下的热门内容

六个好用的Python库，绝对是瑰宝! 2024，开发通用软件正在发生的八大变化！ 2024 年 2 月 TIOBE 指数：最流行的十种编程语言 1.5亿行代码变更背后：代码质量下降，谁来背锅？ 为React开发人员释放ChatGPT的开发力量 面试官：如何实现10亿数据判重？ 孰优孰劣，详细比较Python、Julia、Rust 字节跳动最热门的 15 个前端开源项目

相关专题 更多

2023年第十八届中国企业年终评选榜单公布！ 网络运维智能化？瞻博网络有奇招！ 2023-12-18 11:43:34 Intel 黑客松竞赛火热进行中！ 2023-11-06 12:00:56 我收藏的内容

微博

QQ

微信

复制链接

微信扫码分享

业务

  • 媒体 CIOAgeHC3iTechplur
  • 社区 博客软考资讯鸿蒙开发者社区
  • 教育 学堂精培企业培训CTO训练营
  • 学堂
  • 学堂企业版

  • 官微



关于我们&条款

  • 关于我们
  • 站点地图
  • 网站大事
  • 意见反馈
  • English
  • 用户协议
  • 隐私协议

北京市海淀区中关村南1条甲1号ECO中科爱克大厦6-7层

北京市公安局海淀分局备案编号：110108002980号
营业执照 京ICP备09067568号

Copyright © 2005-2024 .COM 京ICP证060544 版权所有 未经许可 请勿转载

友情链接

新浪科技 腾讯科技 网易科技 凤凰科技 驱动科技 科技行者 TechWeb 艾瑞网 站长之家 速途网 中国经济新闻网 IT之家 工联网 极客公园 236视频会议 中国IDC圈 企业网D1Net 投资界 次方元 火山引擎

技术栈公众号

技术栈公众号

业务
速览

在线客服

媒体 CIOAge HC3i 社区 博客 鸿蒙开发者社区 教育 学堂 精培 企业培训 CTO训练营

里一样，display:table-cell元素必须作为display:table的元素的子孙出现。

当前题目：CSS完美实现垂直居中的方法及优缺点
标题来源：http://www.shufengxianlan.com/qtweb/news23/531223.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

小程序开发知识

同城分类信息

成都橡塑保温管　　 　成都服务器租用　　 　免备案虚拟主机　　 　网创优客　　 　软文推广　　 　成都SEO公司　　 　成都名片印刷厂　　 　网站运营　　 　服务器机柜租用　　 　自贡服务器托管　　 　成都婚庆策划　　 　成都定制高级网站建设　　 　无边发光字厂家　　 　app制作　　 　成都木托盘　　 　成都石膏隔墙板　　 　内江托管服务器　　 　成都光华机房服务器托管　　 　整合营销　　 　成都h5建站开发