怎么使页面缩小的时候图片也居中啊

img

img


p1是华为商城官网鸿蒙智联的界面，p2是我做的，怎么使页面不管放大还是缩小都居中啊，盒子在中间，但是图片跑右边去了，该怎么解决啊

代码贴上来


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:100%;
            height: 100%;
            background-color: #f1153e;
            margin: 0 auto;
        }
        .one{
              width: 100%px;
              height: 74px;
              background-color:white;
         }
        .one img{
            width: 100px;
            height: 74px;
            margin-left: 46px;
            position: relative;
         }
         .one_box{
            width: 100%;
            height: 16px;
         }
        .one_box ul li{
            list-style-type: none;
            float:right;
            position: relative;
            top: -80px;
            right: 1060px;
            margin: 14px 18px;
            color: black;
         }
         .one ul li:hover{
            color: red;
         }
        
         .two{
            width: 100%;
            height: 550px;
            background-color: #f1153e;
            margin: 0 auto;
         }
        .two img{
           width: 2736px;
           height: 550px;
           margin: 0 auto;
           margin-top:0px;
           position:absolute;
         }
         .three{
            width: 100%;
            height: 101px;
            background-color: #f1153e;
         }
         .three img{
            width: 1200px;
            height: 101px;
            margin: 0 auto;
            margin-left: 300px;
            position: absolute;
         }
        </style>
</head>
<body>
<div class="box">
    <div class="one"> 
              <div><img src="https://res.vmallres.com/portal/1.22.10.300/h5/images/logo_app.png" alt=""></div>
              <div class="one_box">
                <ul>
                 <li>个护健康馆</li>
                 <li>家电家装馆</li>
                 <li>智慧出行馆</li>
                 <li>华为智选</li>
                 <li>超新计划</li>
                </ul>
            </div>  
    </div>
    </div>
    
      <div class="two"><img src="images/开头1.jpg" alt=""></div>
      <div class="three"><img src="images/开头.jpg" alt=""></div>