CSS单行内容居中实现及优缺点-css内容居中

本文向大家描述一下如何实现要实现CSS单行内容居中，只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置line-height和height，并使两值相等，再加上over-flow:hidden就可以了。

CSS实现完美垂直居中

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

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

CSS单行内容居中

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

viewplaincopytoclipboardprint?

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

CSS单行内容居中优点：

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

2.支持所有浏览器

CSS单行内容居中缺点：

1.只能显示一行

2.IE中不支持等的居中

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

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

viewplaincopytoclipboardprint?

<pstylepstyle="background:#900;color:#00f;  
font:bold12px/24pxHelvertica,Arial,  
sans-serif;height:24px;width:370px;"> 
Loremipsumdolorsitamet,consectetueradipiscingelit.</p> 
<br/> 
<br/> 
<pstylepstyle="background:#090;color:#00f;  
font:bold12px/2emHelvertica,Arial,sans-serif;  
height:2em;width:370px;overflow:hidden;"> 
Loremipsumdolorsitamet,consectetueradipiscingelit.</p> 
<pstylepstyle="background:#900;color:#00f;  
font:bold12px/24pxHelvertica,Arial,sans-serif;  
height:24px;width:370px;"> 
Loremipsumdolorsitamet,consectetueradipiscingelit.</p> 
<br/> 
<br/> 
<pstylepstyle="background:#090;color:#00f;  
font:bold12px/2emHelvertica,Arial,sans-serif;  
height:2em;width:370px;overflow:hidden;"> 
Loremipsumdolorsitamet,consectetueradipiscingelit.</p> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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

【编辑推荐】