div中内容垂直居中(常用的方法)

1、单行文字显示

<div class="main">
    水平垂直居中div演示效果
</div>

.main{
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

2、多行未知高度文字显示

<div class="main">
    水平垂直居中div演示效果.....
</div>

.main{
    width: 100%;
    padding: 25px;
    text-align: center;
}

3、带有图片和文字显示

<div class="main">
    <p>declan</p>
    <img src="pic_2.png"/>
</div>

.main{
    width: 100%;
    padding: 25px;
    text-align: center;
}

4、固定高度重的内容显示（见完美解决方案）