CSS中的img垂直居中技巧 在網頁設計中，經常涉及到圖片的排版問題。當我們想要將圖片垂直居中時，往往會發現這并不是一件很容易的事情。下面我們將介紹幾種CSS技巧，幫助你實現img的垂直居中。 使用display屬性將img轉換為塊級元素 CSS屬性display可以將元素從行內元素轉變為塊級元素。對于img元素而言，如果我們將其設置為塊級元素，就可以利用margin屬性實現垂直居中。 下面是示例代碼：

p {
display: flex;
}
img {
margin: auto;
}

在上面的代碼中，我們將p元素設置為flexbox容器，將img轉為塊級元素，并設置了margin: auto。這就可以達到將圖片垂直居中的效果。 使用line-height屬性 我們可以使用line-height屬性實現img垂直居中。首先需要將包含img標簽的父元素設置為行內塊級元素，然后將line-height屬性設置為父元素高度的值，就可以實現圖片的垂直居中。 下面是示例代碼：

p {
display: inline-block;
height: 100px;
line-height: 100px;
}
img {
vertical-align: middle;
}

在上面的代碼中，我們將p元素設置為行內塊級元素，將高度和line-height屬性都設置為100px。然后我們將img標簽的vertical-align屬性設置為middle。這樣就可以將圖片垂直居中。 使用Flexbox布局 Flexbox布局可以方便地實現元素的垂直居中。我們只需要將包含img標簽的父元素設置為flexbox容器，并使用justify-content和align-items屬性進行布局即可。 下面是示例代碼：

p {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}

在上面的代碼中，我們將p元素設置為flexbox容器，并設置了justify-content和align-items屬性。這樣就可以將img標簽垂直居中。 結語 在網頁設計中，將圖片垂直居中是一個常見的問題。我們可以通過display屬性、line-height屬性和Flexbox布局等方式來實現圖片的垂直居中。希望本文的介紹可以幫助你更好地完成網頁設計任務。