css讓圖片居中的方法有哪些

CSS圖片居中的方法：1、利用「text-align: center;」樣式；2、使用「margin: 0 auto;」樣式；3、利用彈性盒佈局；4、利用柵格佈局；5、利用絕對定位中對齊；6、利用background屬性，實現背景圖片居中。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

html

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

一、（最簡單）文字屬性對齊text-align

text-align控制元素中文本行的對齊方式。可以在img設一個父輩的div，這樣img就可以是div的文本，然後用text-align修改div屬性。 （在父輩元素中加入屬性）

注意：子元素必須是inline或inline-block；如果子元素也是div的話，需要為子元素設定display：inline/inline-block . 這裡子元素img是inline所以省略這一步。 此方法適用於inline元素上。例如img的居中

css

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

#二、巧用margin

css

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

以上三點缺一不可。

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

• #內行元素必須設定成display: block; img是行內元素必須得設定.如果是input可以不設定。

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

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

#pic {
    width: 100px;
    margin: 0 auto;
}    /*父元素div属于block，所以不用再设 display: block;*/

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

margin的限制：一行顯示兩張圖片時，margin需要相應修改。

三、彈性盒佈局

css

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

彈性盒佈局可以使用少數幾行css實現幾乎所有的佈局。而且最神的是，即使是n個圖片上面兩行都可以實現居中，而不必考慮圖片佈局和位置。

四、柵欄佈局

彈性盒用在導覽列是最普遍的。與之相比，柵格佈局是普適的佈局系統。

#pic {
    display: grid;   
    align-items: center;     /*块级方向（纵向）上的全部栅格元素居中对齐*/
    justify-items: center;  /*行内方向（横向）所有的元素中线对齐*/
}

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

五、絕對定位中對齊

css

#pic {
    position: relative;   /*设置绝对定位元素（img）的容纳块，如果不设置，那么容纳块默认为body*/
}
.logo {
    position: absolute;   
    right: 1em; left: 1em;     //表示左右距离相等
    margin: 0 auto;         //与方法二相似
}

與方法二最大的差別是，margin的用法是針對block元素的。如果用position就不需要設定block 了。但position一般是用在框架佈局上，如果只是圖片居中有點大材小用，比較麻煩。不建議。

六、背景圖片居中

html

dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68

css

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

前提：只要元素內容是空的，就必須設定高度。因為div內容是空的，所以必須要設定高度，否則div是沒有空間的，那麼背景圖片自然也不會顯示。如果是body就不用，因為body自帶高度。

設定為背景圖片的限制是無法設定超連結、title、alt等圖片的屬性。如果不是背景圖片，盡量不要用這種格式。

（學習影片分享：css影片教學）

以上是css讓圖片居中的方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！