1、div的高度已知---line-hight
<div>
<span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Logo" />固定高宽,图片垂直局中</span>
</div>
<style>
.vertical {
500px;
height:220px;
line-height:220px;
border: 1px solid;
text-align: center;
}
.vertical img {
vertical-align: middle;
}
</style>
<!--[if IE 6]>
<style>
.vertical span {
height: 100%; /* 要保证和父元素高度一样才行 */
writing-mode: tb-rl;
vertical-align: middle;
}
</style>
<![endif]-->
只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden
2、定位方法垂直居中显示图片--height已知
<style>
.vertical{
300px;
height:200px;
display:table;
text-align:center;
border:solid 1px red;
}
.vertical span{
display:table-cell;
vertical-align:middle;
border:solid 1px blue;
}
.vertical span img{
border:dashed 1px green;
}
</style>
<!--[if lte IE 7]>
<style>
.vertical{
position:relative;
overflow:hidden;
}
.vertical span{
position:absolute;
left:50%;
top:50%;
}
.vertical span img{
position:relative;
left:-50%;
top:-50%;
}
</style>
<![endif]-->
<div>
<span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Logo" /></span>
</div>
vertical-align适用于：内联及 table-cell 元素；text-align适用于块元素
3、未知高度垂直居中--resiez
<style type="text/css">
.demo{
resize:both;
overflow:hidden;
100px;
height:100px;
background:#aaa;
display:inline-block;
font-size:0;
}
.demo p{
display:inline-block;
vertical-align:middle;
font-size:16px;
}
.demo::after{
display:inline-block;
height:100%;
0;
content:' 020';
vertical-align:middle;
}
</style>
<div>
<p>ddd</p>
</div>
IE6-8b不支持
4、利用button实现垂直居中
/*单行文本对齐：button*/
.demo{
600px;
height:100px;
background:#fcc;
border: 1px solid #596480;
}
button{
margin:0;
padding:0;
}
.demo button{
0;
height:100px;
vertical-align:middle;
overflow:hidden;
}
.demo span{
/*这个不能省*/
vertical-align:middle;
}
<h2>单行文本垂直居中：button</h2>
<div class="demo">
<button>test</button>
<span>单行文本垂直对齐：button，不能居中对齐</span>
</div>
此方法不可以实现文本居中对齐
5、多行文本对齐：定位+百分比
<h2>多行文本垂直居中：定位+百分比</h2>
<div class="mul-text">
<div class="outter">
<span class="inner">
多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中
多行文本垂直居中多行文本垂直居中
</span>
</div>
</div>
/*多行文本居中：1*/
.mul-text{
display: table-cell;
600px;
height: 100px;
vertical-align: middle;
text-align:center;
border: 1px solid #596480;
background: #ffc;
/*兼容ie6,7*/
*position: relative;
}
.outter{
/*该div相对父div（class=mul-text）垂直对齐，使用的是绝对定位*/
*position: absolute;
*top: 50%;
*left: 0;
}
.inner{
/*相对父div(class=outter)进行相对定位,inner
会相对outter行框进行显示*/
*position: relative;
/*设置top可以使得inner相对outter居中*/
*top: -50%;
*left: 0;
}
6、多行文本垂直居中：after
<h2>多行文本垂直居中：after</h2>
<div class="mul-text-2">
<span class="inner-2">
多行文本显示多行文本显示多行文本显示多行文本显多行示多行文本显示多行文本
</span>
<span></span>
</div>
/*多行文本对齐：after*/
.mul-text-2{
600px;
height:100px;
background:#aa8;
/*font-size不能少*/
font-size:0;
overflow:hidden;
text-align:center;
}
.inner-2,.after,.mul-text-2:after{
display:inline-block;
vertical-align:middle;
}
.inner-2{
font-size:18px;
}
.after,.mul-text-2:after{
/*清除浮动*/
content:" 200";
overflow:hidden;
0;
height:100px;
visibility:hidden;
}
7、背景图片居中
<h2>图片垂直居中：行高</h2>
<div class="img-text">
<span>sssssss1</span>
<div class='img-div'><i></i></div>
</div>
/*背景图片*/
.img-text{
600px;
height:100px;
border:#f63;
border: 1px solid #596480;
vertical-align:middle;
text-align:center;
font-size:0;
}
.img-text span{
font-size:15px;
display:inline-block;
height:100px;
line-height:100px;
}
.img-div{
134px;
height:44px;
display:inline-block;
vertical-align:middle;
}
.logo{
display:inline-block;
background:url(./img/logo.png);
134px;
height:44px;
}