用div布局时怎么让文字或图片垂直居中对齐呢？

 

 

一、傻瓜式
在给DIV一个 TOP-PADDING 的值，值设置多少要自己去试。

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

.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
} 
优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持<img>等的居中

三、多行内容居中，且容器高度可变
也很简单，给出一致的 padding-bottom 和 padding-top 就行

.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
} 
优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：
容器不能固定高度