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;
}

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