站長(zhǎng)資訊網(wǎng)html中圖片怎么居中對(duì)齊？下面本篇文章給大家介紹一下。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。
圖片的居中方式有很多種吧，算是html基礎(chǔ)，下面給大家介紹幾種方法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> div{ width: 200px; height: 200px; border: 3px solid skyblue; } </style> </head> <body> <div> <img src="1.jpg" width="150px" /> </div> </body> </html>
以上代碼的效果圖：
方法1：
img{ position: relative; left: 50%; top: 50%; margin: -60px 0 0 -75px; }
給img標(biāo)簽設(shè)置position定位，position:relative，left：50%；top：50%分別指將改元素向右移動(dòng)一半父容器寬度的距離以及向下移動(dòng)一半父容器高度的距離，由于移動(dòng)的距離是以父容器為標(biāo)準(zhǔn)的一半高度寬度距離，效果如下：
因?yàn)檫@張圖片較大，所以超出了div的范圍。。。
之后要將 img往回移動(dòng)，才能使img元素居中顯示，margin: -60px 0 0 -75px;指的是將img元素向左移動(dòng)75px，向上移動(dòng)60px（因?yàn)橛玫膱D片素材的寬高為150*120），這樣便能使得圖片居中了。
方法2：
img{ position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%); }
其實(shí)這里跟上面的方法是類(lèi)似的，但是個(gè)人覺(jué)得這種比較實(shí)用，因?yàn)榉椒ㄒ挥袀€(gè)麻煩的地方，就是margin值必須跟著img元素的大小變化，如果說(shuō)img元素都是一樣的大小倒無(wú)所謂，但是這種要求未免有些高。
這種做法是用的2d轉(zhuǎn)換，transform：translate（x軸移動(dòng)的數(shù)值，y軸移動(dòng)的值），這個(gè)方法的好處便在于不用去測(cè)量img元素的寬高，直接設(shè)置百分比，在transform：translate（）中，使用的百分比其實(shí)是相對(duì)于元素自身寬高的。
方法3：
設(shè)置為兩級(jí)父容器，第一級(jí)設(shè)置display：table，將第一級(jí)父容器轉(zhuǎn)換成表格類(lèi)型，
之后在第二級(jí)，也就是img的上一級(jí)父容器設(shè)置display：table-cell，
在第一級(jí)父容器中設(shè)置text-align：center，
第二級(jí)設(shè)置vertical-align: middle，便可以達(dá)到將圖片居中的目的
方法4：
設(shè)置主側(cè)軸對(duì)齊方式
<div class="a"> <img src="img/MEIZU.png" > </div>
div.a{ width: 600px; height: 200px; border: 1px solid saddlebrown; display: flex; justify-content: space-around; align-items: center; } div.a img{ border: 1px solid red; }
給父容器設(shè)置display：flex，將父容器轉(zhuǎn)換成伸縮盒子，因?yàn)閼?yīng)用主側(cè)軸對(duì)齊方式就需要這樣。。。。
之后再設(shè)置主軸對(duì)齊方式為 justify-content: space-around;
注意: Internet Explorer 10 及更早版本瀏覽器不支持 justify-content 屬性。
注意: Safari 6.1 及更新版本通過(guò) -webkit-justify-content 屬性支持該屬性。
接著設(shè)置父容器的側(cè)軸對(duì)齊方式，align-items: center;
注意: Internet Explorer 10 及更早版本瀏覽器不支持 align-items 屬性。
注意: Safari 7.0 及更新版本通過(guò) -webkit-align-items 屬性支持該屬性。
看啥呢，圖片這樣就已經(jīng)居中了啊。
如果不是因?yàn)镮nternet Explorer 10 及更早版本瀏覽器不支持，其實(shí)這個(gè)方法算是最合適的吧。
推薦教程：html教程
