要將一張圖片垂直和水平居中在一個 <div> 元素中，你可以使用以下 CSS 樣式：
div {
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
}這里，display: flex; 宣告了 <div> 元素是一個 Flexbox 容器，justify-content: center; 和 align-items: center; 使得 Flexbox 容器的內容垂直和水平居中對齊，img 元素的 max-width 和 max-height 樣式保證了圖片的尺寸不會超過容器的大小，從而可以完整地顯示在容器中，
另外，你也可以使用 text-align: center; 將圖片水平居中，然后通過設定 line-height 與容器高度相等來使圖片垂直居中，例如：
div {
text-align: center;
height: 300px;
line-height: 300px;
}
img {
vertical-align: middle;
}這里，text-align: center; 讓圖片水平居中，height 宣告了容器的高度，line-height 使得行高等于容器的高度，從而使得圖片垂直居中，vertical-align: middle; 則是為了解決圖片與行基線對齊的問題，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544776.html
標籤：其他