作者：ruxpinsp1 时间： 2006-02-24 文档类型：原创 来自：蓝色理想
一、单行内容的居中
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了
.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要
为什么？
请比较以下两个例子：
<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
效果：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。
二、多行内容居中，且容器高度可变
也很简单，给出一致的 padding-bottom 和 padding-top 就行
.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：
容器不能固定高度
三、把容器当作表格单元
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。
要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。
优点：
不用说了吧，就是表格，效果和表格一模一样
缺点：
IE下无效
四、以毒攻毒！用 IE 的 bug 解决 IE 中的绝对居中
先不得不说一句，IE 真的是个很烂的浏览器，CSS1中的定义都不支持，害得要我们转个大圈子来造居中。不过就像我说的，凡是 table 布局可以实现的，CSS 一定可以实现，即使在 IE 里也不例外。我研究 IE layout 模式多年，还是找出了一个可以在 IE 中绝对居中的方法。这个方法就是基于 IE layout 的 bug，也可以算以毒攻毒。至于原理，不要问我，这是独门秘学，何况三言两语也讲不清楚，只要好用就行
.middle-demo-4{
height: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50%;
left: 0;
}
.middle-demo-4 div div{
position: relative;
top: -50%;
left: 0;
}
五、整合三和四，写出支持所有浏览器的垂直居中容器！
思路是利用 IE 和 非IE 浏览器的 CSS hack, 整合三和四的CSS，写出兼容主流浏览器的垂直居中容器。具体代码就不给出了，大家权当作练习练习。例子可以在下面的附录中找到。
最终实测支持的浏览器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上对合适模型的补正。
推测支持的浏览器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
未测试浏览器：Konqueror
最后附上自己写的，所有居中布局的范例网页，大家不明白可以参考
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo:: vertical align: middle</title>
<meta lang="en" name="author" content="Spenser Lee" />
<meta lang="en" name="copyright" content="(c)2006 Liberty Studio" />
<style media="screen" type="text/css">...
html,body,div,h1,h2,pre,dd,ol{...}{margin: 0;padding: 0;border: 0}
html{...}{min-width: 779px}
body{...}{background: #fff;color: #596480;text-align: center}
div#main-wrapper{...}{padding: 12px 5px;width: 769px;margin: 0 auto}
div,code,p,h1,h2,address,dt,dd,li{...}{font: normal 12px/1.5em Tahoma,"Lucida Grande",Helvetica,Verdana,Lucida,Arial,"Arial Unicode",sans-serif,serif}
h1{...}{font-size: 22px;font-weight: bold;border-left: 12px solid #324f96;background: #e0eaf4;color: #4868a9;height: 4em;line-height: 4em;padding: 0 12px;overflow: hidden; text-align: left}
h2{...}{font-size: 12px;font-weight: bold;background: #c0014e;color: #fff;height: 2.5em;line-height: 2.5em;padding: 0 24px;overflow: hidden;margin: 12px 0;text-align: left}
h2 a{...}{color: #fff;background: transparent}
h2 a:hover{...}{text-decoration: none}
p{...}{margin: 6px 0;padding: 0 12px 0 24px;text-indent: 2em;text-align: left}
p.snap-back{...}{text-align: right}
code{...}{display: block;font-family: "Courier New", Courier, monospace, mono, serif;margin: 12px auto;padding: 12px;border: 1px solid #596480;color: inherit;background: #f6f6f6;text-align: left;white-space: pre;width: 350px}
strong{...}{font-weight: bold}
em{...}{font-style: italic}
address{...}{display: block;padding: 0 12px;margin: 12px 0;text-align: right}
dl{...}{margin: 6px 0;padding: 0 12px 0 24px;text-align: left}
dt{...}{margin: 0;text-indent: 2em;font-weight: bold}
dd{...}{margin-left: 24px;text-indent: 2em}
li{...}{list-style: square inside none;text-align: left}
ol#table-of-content{...}{padding-left: 24px}
a{...}{color: #c0014e;background: transparent;text-decoration: none}
a:hover{...}{text-decoration: underline}
div.demo{...}{width: 400px;margin: 12px auto;border: 1px solid #596480;color: inherit;background: #ffc}
div.demo p{...}{text-align: left;margin: 24px;text-indent: 0}
p#demo-1{...}{margin: 12px auto;padding: 0 12px;width: 400px;text-indent: 0
分享到：
相关推荐
图片 CSS垂直居中图片 CSS垂直居中
NULL 博文链接：https://zhouyao.iteye.com/blog/417432
DIV+CSS 图片垂直居中效果
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
CSS实现完美垂直居中 - 蓝色理想
css图片垂直居中方法
众所周知，“css如何实现元素垂直居中？”已经是一个老生常谈的问题了，这个问题目前已经有了许多解决方案，这些方案也都有各自适用的场景以及优缺点，大致如下： flex布局 grid布局 table布局 line-height搭配...
css 垂直居中.docx
网页CSS的垂直居中需求始终没有停过，而其困难度也始终没有让人轻松过，经过了每位开发先烈的研究后，据说CSS的垂直居中技巧已达到近十种之多，但始终鲜为人知，部分公司甚至将CSS的垂直居中技巧当成面试题，其重要...
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中
div框水平垂直居中跟内容垂直居中
主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
...
...
如下代码父元素高度确定的多行文本父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种方法一使用插入 table (包括tbody、tr、td)标签，同
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”，其实水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
css 多行文本垂直居中显示，兼容各大浏览器！
在做前端项目时CSS的水平居中我们经常使用，但有时还会用到CSS垂直居中，对于小白来说这个就有些难度了，下面看一下我是如何实现的