圖文詳解圖片水平垂直居中的五種方法（附代碼）

在頁面佈局時經常需要對圖片的位置進行處理，這篇文章圍繞圖片居中展開，主要講瞭如何用CSS實現圖片的水平居中，圖片垂直居中，還有圖片的水平垂直居中，課程比較實用，有興趣的小夥伴，可以參考一下，希望對你有幫助。

1、text-align: center實作圖片水平居中

text-align一般用於文字的水平居中，也可以用於圖片，程式碼如下：

CSS部分：

<style type="text/css">
    div{
        text-align: center;
        width: 500px; 
        border: green solid 1px;
        }
</style>

HTML部分：

<div>
    <img  src="img/logo.png" / alt="圖文詳解圖片水平垂直居中的五種方法（附代碼）" >
</div>

效果圖：

2、line-height和text-align: center 實作圖片的水平垂直居中

設定line-height的值等於height，可以實現垂直居中，text-align: center可以實現水平居中。 HTML部分一樣，CSS程式碼如下：

<style type="text/css">
div{
text-align: center; 
width: 400px;
height:200px; 
line-height:200px; 
border: green solid 1px;
}
img{
vertical-align: middle;
}
</style>

效果圖：

3、display: table和display: table-cell實作圖片水平垂直居中

利用table方法設定display: table，display: table-cell，但這種方法並不相容IE6/IE7，如果你不需要支援IE67可以使用這個方法

css樣式直接寫在標籤裡面，程式碼如下：

<div style="text-align: center; width: 400px;height:200px; display: table;border: green solid 1px;">
    <span style="display: table-cell; vertical-align: middle; ">
        <img  src="img/logo.png"  / alt="圖文詳解圖片水平垂直居中的五種方法（附代碼）" >
    </span>
</div>

#4、position實作圖片水平垂直居中

定位方法：在父盒子中設定相對定位，在子盒子中設定絕對定位，即所謂的父相對子絕對。設定圖片位置左邊為50%，上邊為50%，（注意：這樣並沒有垂直置中），還要設定margin-left為圖片長度的一半，margin-top為圖片高度的一半。 HTML部分一樣，CSS程式碼如下;

<style type="text/css">
div{
width: 400px;
height:200px; 
position: relative;
border: green solid 1px;
}
img{
width: 200px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -25px;
}
</style>

5、背景background實作圖片水平垂直居中

利用background: url no-repeat center center 實作圖片的水平垂直居中

div{
width: 400px;
height:200px; 
border: green solid 1px;
background: url(img/logo.png) no-repeat center center ;
}

總結：以上介紹了圖片居中的5種方法，各不相同，具體用什麼方法，看個人習慣和工作需要，初學者可以自己動手嘗試，希望可以幫助到你!

以上是圖文詳解圖片水平垂直居中的五種方法（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！