CSS中讓input框居中顯示圖片的方法

在CSS中，我們可以使用flexbox布局來讓input框居中顯示圖片，下面是一個簡單的示例代碼：

HTML代碼：

<div class="container">
  <input type="text" class="input-box">
  <img class="image" src="圖片路徑">
</div>

CSS代碼：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-box {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}
.image {
  max-width: 100%;
  max-height: 100%;
}

在這個示例中，我們創(chuàng)建了一個名為container的div，并使用flexbox布局將其子元素（input框和圖片）居中。align-items: center;和justify-content: center;屬性將子元素在水平和垂直方向上居中，我們設(shè)置input框的寬度和高度，并添加邊框，我們設(shè)置圖片的***大寬度和***大高度，以確保圖片在input框中居中顯示。