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

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