CSS圖片居中的方法：1、利用“text-align: center;”樣式；2、利用“margin: 0 auto;”樣式；3、利用彈性盒布局；4、利用柵格布局；5、利用絕對(duì)定位中對(duì)齊；6、利用background屬性，實(shí)現(xiàn)背景圖片居中。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

html

 <div id="pic">         <img src=star.jpg class="logo">  </div>

一、（最簡單）文本屬性對(duì)齊text-align

text-align控制元素中文本行的對(duì)齊方式?？梢栽趇mg設(shè)一個(gè)父輩的div，這樣img就可以是div的文本，然后用text-align修改div屬性。（在父輩元素添加屬性）

注意：子元素必須是inline或inline-block；如果子元素也是div的話，需要給子元素設(shè)置display：inline/inline-block. 這里子元素img是inline所以省略這一步。該方法適用于inline元素上。比如img的居中

css

#pic {     text-align: center;   /*表示div的子元素居中*/ }

二、巧用margin

css

img {     display: block;         width: 100px;     margin: 0 auto; }

以上三點(diǎn)缺一不可。

margin: 0 auto;居中的前提是：

• 內(nèi)行元素必須要設(shè)置成display: block; img是行內(nèi)元素必須得設(shè)置。如果是input可以不設(shè)置。

• 元素必須要有寬度；自帶寬度的除外，比如button和input等。

根據(jù)前提，還可以有另一種方法-修改父元素屬性

#pic {     width: 100px;     margin: 0 auto; }    /*父元素div屬于block，所以不用再設(shè) display: block;*/

綜上所屬，該方法適用于block元素上。比如div、input的居中

margin的局限：一行顯示兩個(gè)圖片時(shí)，margin需要相應(yīng)修改。

三、彈性盒布局

css

#pic {     display: flex;        justify-content: center;     }

彈性盒布局可以使用少數(shù)幾行css實(shí)現(xiàn)幾乎所有的布局。而且最神的是，即便是n個(gè)圖片上面兩行都可以實(shí)現(xiàn)居中，而不必考慮圖片布局和位置。

四、柵格布局

彈性盒用在導(dǎo)航欄是最普遍的。與之相比，柵格布局是普適的布局系統(tǒng)。

#pic {     display: grid;        align-items: center;     /*塊級(jí)方向（縱向）上的全部柵格元素居中對(duì)齊*/     justify-items: center;  /*行內(nèi)方向（橫向）所有的元素中線對(duì)齊*/ }

所以能夠非常方便的處理多張圖片對(duì)齊的問題。

五、絕對(duì)定位中對(duì)齊

css

#pic {     position: relative;   /*設(shè)置絕對(duì)定位元素（img）的容納塊，如果不設(shè)置，那么容納塊默認(rèn)為body*/ } .logo {     position: absolute;        right: 1em; left: 1em;     //表示左右距離相等     margin: 0 auto;         //與方法二相似 }

與方法二最大的區(qū)別是，margin的用法是針對(duì)block元素的。如果用position就不需要設(shè)置block 了。但是position一般用在框架布局上，如果只是圖片居中有點(diǎn)大材小用，比較麻煩。不建議。

六、背景圖片居中

html

<div></div>

css

div {     height: 1000px;  /*高度非常重要*/     background: url(star.jpg) no-repeat top center;  }

前提：只要元素內(nèi)容是空的，就必須設(shè)置高度。因?yàn)閐iv內(nèi)容是空的，所以必須要設(shè)置高度，否則div是沒有空間的，那背景圖片自然也不會(huì)顯示。如果是body就不用，因?yàn)閎ody自帶高度。

設(shè)置為背景圖片的局限性是無法設(shè)置超鏈接、title、alt等圖片的屬性。如果不是背景圖片，盡量不要用這種格式。

（學(xué)習(xí)視頻分享：css視頻教程）