超出容器的圖片在容器裏左右居中，不使圖片變形（大圖片居中問題）

超出容器的圖片在容器裏左右劇中，不使圖片變形（大圖片居中問題）

父元素：overflow:hidden; text-align:center;
子元素（img標籤）：margin:0 -100%;

實例代碼片段：

<li className={style.father}>
	<img src={require('./img/zt2.jpg')} alt="" />
</li>

.father{
    text-align: center;
    overflow: hidden;
}
.father img{
    width: initial;
    height: 460px;
    margin: 0 -100%;
}

除去這個方法還有就是背景圖居中解決

直接上代碼：

<div class="box"></div>

.box{
	width: 400px;
	height: 300px;
	background: url(img/dl6.jpg) no-repeat center;
}

還有一個解決辦法

例如內容幾個標籤寬度可以設置width：fit-content，不建議使用，有興趣的可以自測一下兼容性

都是工作中遇到的問題，純屬個人總結，歡迎指出更好方法

其他居中方法參考本人另外一篇文章
css 樣式 常用水平/垂直居中