DIV或者DIV里面的圖片水平與垂直居中的方法

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

水平居中的常用方式：

　　text-align:center ——這可以實(shí)現(xiàn)子元素字體，圖片的水平居中。

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

垂直居中的常用方式：? ??

　　??vertical-align: middle;——這個(gè)垂直居中屬性，只對(duì) inline 或者 inline-block 元素有效。

　　??這里沒(méi)考慮flex的垂直居中的用法

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

　　第一種方式：直接手動(dòng)計(jì)算的方式。已知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的值，當(dāng)然也可以使用margin-top，這樣也可以實(shí)現(xiàn)圖片在div里垂直居中。水平居中就用?text-align: center;?就行了。

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

1 img{ 2 　　　　position:relative; 3 　　　　top:50%; 4 　　　　left:50%; 5 　　　　margin-top:負(fù)圖片height的一半； 6 　　　　margin-left：負(fù)圖片width的一半； 7 　　}

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

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

?備注：如果不固定，自適應(yīng)高度的話，圖片估計(jì)會(huì)跑到div的上面一點(diǎn)。這種是使用css3的方式來(lái)實(shí)現(xiàn)水平垂直居中，當(dāng)然兼容性的話，不支持transform就不支持這種方式了

　　第四種方式：?把box當(dāng)做單元格，box的寬高可不用設(shè)置，讓圖片自己擴(kuò)張也行。這種方式box的寬高最好固定。當(dāng)然不固定也能實(shí)現(xiàn)效果。? ? ? ? ? ? ?

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

?備注：?display: table-cell?相當(dāng)于是把標(biāo)簽元素當(dāng)作一個(gè)單元格來(lái)處理。唯一的缺點(diǎn)就是IE6/7不兼容。　　

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

html:

1 <table class="img_meng_show"> 2 　　<tr> 3 　　　　<td> 4 　　　　　　　<img src=""> 5 　　　　</td> 6 　　</tr> 7 </table>

css:　　

1 .img_meng_show td{ 2 　　　vertical-align: middle; 3 　　　text-align: center; 4 }

?

?

---

?

?

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

第一種方式：

HTML:

<div class="box></div>

css:

1 .box{2 　　position:absolute(或者是fixed);3 　　top:0;4 　　left:0;5 　　bottom:0;6 　　right:0;7 　　margin:auto;8 　　width:100px;9 　　height:200px; 10 }

　這個(gè)能實(shí)現(xiàn)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>

?這種結(jié)構(gòu)，也可以參考圖片在div中水平和垂直居中的方式實(shí)現(xiàn)。只是塊元素的水平居中的話?text-align: center;?要換成?margin: 0 auto;?

?

每天進(jìn)步一點(diǎn)點(diǎn)。 拜托大家轉(zhuǎn)載的時(shí)候記得貼上我文章的連接，原創(chuàng)不容易，給條活路唄

總結(jié)

以上是生活随笔為你收集整理的DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。