不管屏幕尺寸如何变化，图片始终水平居中显示

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>限制容器尺寸的水平居中方案</title>
    <style>
        /* 全屏外层容器 */
        .viewport {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            background: #f5f5f5;
        }

        /* 图片容器（限制最大尺寸） */
        .image-container {
            position: relative;
            max-width: 1920px;
            max-height: 800px;
            width: 90vw;  /* 自适应宽度 */
            height: 90vh; /* 自适应高度 */
            overflow: hidden;
            border: 2px solid #333;
            background: white;
        }

        /* 固定尺寸图片 */
        .original-image {
            position: absolute;
            left: 50%;              /* 关键定位属性 */
            transform: translateX(-50%); /* 水平居中校正 */
            
            /* 保持原始尺寸（示例值需替换） */
            width: 1600px; 
            height: 1200px;
            
            /* 可选样式 */
            object-fit: contain;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div>
        <div>
            <img src="https://picsum.photos/1600/1200" 
                 alt="示例图片" 
                 class="original-image">
        </div>
    </div>

    <script>
        // 自动获取图片原始尺寸（可选）
        document.querySelector('.original-image').onload = function() {
            this.style.width = this.naturalWidth + 'px';
            this.style.height = this.naturalHeight + 'px';
        };
    </script>
</body>
</html>