DIV或者DIV的圖片如何實現水平與垂直居中

小編給大家分享一下DIV或者DIV的圖片如何實現水平與垂直居中，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

<div class=“box”>
　　<img />
</div>

水平居中的常用方式：

　　text-align:center ——這可以實現子元素字體，圖片的水平居中。

　　margin:0 auto —— 這是針對塊元素的水平居中方法

垂直居中的常用方式：   

　　  vertical-align: middle;——這個垂直居中屬性，只對 inline 或者 inline-block 元素有效。

　　  這里沒考慮flex的垂直居中的用法

div中圖片水平和垂直居中方式：

　　第一種方式：直接手動計算的方式。已知box的高度和圖片的高度

.box{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}
img{
    width: 80px;
    height: 80px;
    padding-top: 110px;
}

 備注：這種方式是：用box的高度減去圖片的高度再除以2，就是padding-top的值，當然也可以使用margin-top，這樣也可以實現圖片在div里垂直居中。水平居中就用 text-align: center; 就行了。

　　第二種方式：圖片已知寬高

 img{
 　　　　position:relative;
 　　　　top:50%;
 　　　　left:50%;
 　　　　margin-top:負圖片height的一半；
 　　　　margin-left：負圖片width的一半；
 　　}

　　第三種方式：圖片未知寬高，box最好固定高度。

img{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

 備注：如果不固定，自適應高度的話，圖片估計會跑到div的上面一點。這種是使用css3的方式來實現水平垂直居中，當然兼容性的話，不支持transform就不支持這種方式了

　　第四種方式： 把box當做單元格，box的寬高可不用設置，讓圖片自己擴張也行。這種方式box的寬高最好固定。當然不固定也能實現效果。            

.box{
    width: 300px;
    height: 300px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    border: 1px solid red;
}

 備注： display: table-cell 相當于是把標簽元素當作一個單元格來處理。唯一的缺點就是IE6/7不兼容。　　

　　第五種方式：使用table來達到水平垂直居中的效果。table的寬高已知

html:

 <table class="img_meng_show">
 　　<tr>
 　　　　<td>
 　　　　　　　<img src="">
 　　　　</td>
 　　</tr>
 </table>

css:　　

 .img_meng_show td{
　　　vertical-align: middle;
 　　　text-align: center;
 }

DIV水平和垂直居中的方法：

第一種方式：

HTML:

<div class="box></div>

css:

  .box{
  　　position:absolute(或者是fixed);
  　　top:0;
  　　left:0;
  　　bottom:0;
  　　right:0;
 　　margin:auto;
  　　width:100px;
  　　height:200px;
 }

　這個能實現div垂直和水平居中，但是必要條件就是寬高必須加上，margin也必須加上。如果想里面的圖片也水平和垂直居中，可以參照上面圖片用margin-left這種方式；

　如果只想垂直居中，只要top與bottom，然后 margin:auto 0;

　同理，只想水平居中，只要top與bottom，然后 margin: 0 auto;

　但是這種方法不支持ie8以下。

 第二種方式：

使用css3 translate的方法，也能讓div垂直水平居中：

.box{
    position: fixed（或者absolute）;
    top: 50%;
    left: 50%;
    width: 100px;
    /*height: 100px;*/高度可以不定死
    background: skyblue;
    transform: translate(-50%,-50%);
}

如果是div中的div，即

<div class="out">
    <div class="in"></div>
</div>

 這種結構，也可以參考圖片在div中水平和垂直居中的方式實現。只是塊元素的水平居中的話 text-align: center; 要換成 margin: 0 auto; 

看完了這篇文章，相信你對“DIV或者DIV的圖片如何實現水平與垂直居中”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！