将text-align: center; CSS声明添加到父.box，而不是子.box img。

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden;
    text-align: center;  /* align center all inline elements */
}

这里是**Fiddle**。

更新

图像下面好像还有一个5px的缺口，属于行高预留字符。要从像<img>这样的内联元素中删除它，可以使用vertical-align: bottom：

.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* <-- fix the vertical gap */
}

JSFiddle Demo #2

你需要将text-align: center;从图片的CSS移动到其父div的CSS，这样你的CSS看起来像这样：

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden; 
    text-align:center
}

.box img {
    height: 100%;
    width: auto;
}

就是这样！

如果有人在这里寻找解决方案，这里有一个使用display: flex的解决方案。

.box {
   display:flex;
   justify-content: center;
   align-items: center;
   background: green;
   border: 2px solid red;
   height: 100%;
   width: 450px;
   overflow: hidden;   
}
.box img {
  justify-content: center;
  align-items: center;
}

如果您的父div具有宽度，则尝试将图像margin属性指定为margin:0 auto，以便图像将按照父div居中

如果以百分比表示宽度，则可以使用边距居中：

.box img {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

我会把它添加到.box img中。

.box img { margin-left: -25%; margin-top: -25%; }

你可能需要对每个图像进行调整，或者因为尺寸的关系而不需要调整。