今天碰到了一個問題，給一個父容器和一個子元素，子元素不定高和不定寬，怎麼讓子元素居中在父容器中，比如下段程式碼

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

上面的方法也可以實現不定高寬的內容居中，而且裡面還可以加別的元素。