在頁面佈局時經常需要對圖片的位置進行處理，這篇文章圍繞圖片居中展開，主要講瞭如何用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="max-width:90%">
<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中文網其他相關文章！
