CSS关于元素垂直居中的问题

今天碰到了一个问题，给一个父容器和一个子元素，子元素不定高和不定宽，怎么让子元素居中在父容器中，比如下段代码

方法1:

<div class="div1">
<div class="div2">
<p>this is a test!</p>
</div>
</div>

保证div2居中在div1中，想了下，CSS代码如下

　　　*{
margin: 0;padding: 0;
}
.div1{
padding:20px 100px;
margin: 20px;
height: 600px;
width: 500px;
text-align: center;
border: 1px solid #ccc;
}
.div1:before{
content: ".";
height: 100%;
display: inline-block;
vertical-align: middle;
visibility: hidden;
}
.div2{
border: 1px solid gray;
display: inline-block;
vertical-align: middle;
}

可以利用 vertical-align:middle属性保证垂直居中，和父容器的text-align:center来保存水平居中，前面一个属性只能对display:inline-block有效，而且需要参照物，所以用

:before伪元素来实现。

方法2:

<div class="div1">
<div class="content">
<img src="" alt="">
</div>
</div>

实现上面的图片内容居中，可以用父容器的line-height来实现

.div1{
margin:20px;
line-height:500px;
text-align:center;
}

.content{
display:inline-block;
vertical-align:middle;
line-height:normal;
}

.content img{
max-width:100px;
}

上面的方法也可以实现不定高宽的内容居中，而且里面还可以加别的元素。