css如何實作圖片在div中垂直居中

這篇文章主要介紹css如何實現圖片在div中垂直居中問題，具有一定參考價值，希望能給大家提供幫助

平時我們在做頁面時常常會遇到讓我們把一張圖片顯示在div正中間但是常常不知道如何去做，今天我們來分享幾種常用的css實現圖片在div中垂直居中的代碼

HTML代碼

<div>
	<img src="images/1.jpg">
</div>

方法一

利用position和margin共同實作

透過為父元素設定絕對定位屬性讓子元素相對於div定位

relative是保留原來的位置進行定位並且是相對於自己原來的位置進行定位

absolute 是脫離原來位置定位，是相對於最近的有定位的父級進行定位；如果沒有有定位的父級元素，就相對於文檔進行定位

注意：要使子元素的上下左右都為0，然後設定margin：auto就會自動垂直居中

程式碼如下

div{
	width:200px;
	height:200px;
	border: 1px solid #ccc;
	position: relative;//父元素设置绝对定位
}
img{
    position: absolute;//相对定位
	width:80px;
	height:50px;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;//使其垂直居中
	}

效果圖

方法二

利用display: table-cell;vertical-align: middle;text-align: center;三種屬性實作

display:table-cell:會作為表格單元格顯示（類似b6c5a531a458a2e790c1fd6421739d1c 和b4d429308760b6c2d20d6300079ed38e)

vertical-align: middle;設定垂直對齊方式，適用於行級元素

text-align: center：設定水平對其方式，該屬性透過指定行框與哪個點對齊，從而設定區塊級元素內文字的水平對齊方式。

div{
        width:200px;
        height: 200px;
        margin:300px auto;
        display: table-cell;//作为一个表格单元格显示
        vertical-align: middle;//设置垂直对齐方式
        text-align: center;//设置水平对其方式
        border:1px solid #ccc;
    }
     img {
        width:80px;
        height:50px;
    }

效果圖

#方法三

利用position,以及margin- top、margin-left實作

在本方法中要注意margin-top、margin-left值的設定，要設定為元素高度和寬度的一半，而且都要取負值

例如margin-top: -40px意思是元素距離上邊界向上40px，而margin-top: 40px的意思是距離上邊界元素向下40px

div{
	width:200px;
	height:200px;
	border: 1px solid #ccc;
	position: relative;
}
img{
	position: absolute;
	width:80px;
	height: 50px;
	top:50%;
	left:50%;
	margin-top: -40px;//向上40px
	margin-left: -25px;//向左25px

}

效果圖

總結：實現利用css將圖片在div中垂直居中問題的方法有很多中，以上就是我總結出來的三種方法，其餘的歡迎大家補充，希望這篇文章能夠對大家學習頁面版面有所幫助。

#

以上是css如何實作圖片在div中垂直居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！