div 元素在缩放 HTML/CSS 时位于左上角而不是居中答案

【问题标题】：div elements are going top left and not centered when getting zoomed HTML/CSSdiv 元素在缩放 HTML/CSS 时位于左上角而不是居中
【发布时间】：2021-07-25 23:41:42
【问题描述】：

我在放大时难以使背景或 div 居中。当我将* 设置为1200px 时，一切都居中。但是当我放大 POV 时，背景左侧会放大。

这是我放大后的 POV 示例：

[https://imgur.com/a/gF50dhh][1]

这是我的代码：

*{
    width: 1200px;
    margin: 0 auto;
    padding: 0;
}
html {
    background-color: #0f1011;
    text-align: center;
    font-size: 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    position: relative;
    min-height: 100%;
    margin: 0 auto;
}

/*NAVIGATION BAR*/

.nav {
    padding: 20px;
    background-color: #a91817;
    font-size: 21px;
    margin:0 auto;
}
.navbarmargin {
    margin: 0 auto;
}
.product {
    font-family: 'Zen Dots';
    font-size: 15px;
    display: flex;
    float: left;
}

/*NAVIGATION BAR ELEMENT*/
.homee {
    text-decoration: none;
    font-family: 'Alatsi';
    color: #f7f8f9;
    transition: 500ms ease-in-out;
    margin-left:30px;
    margin-right:30px;
}
.homee:hover {
    color: #292f31;
    padding-top: 20px;
    padding-bottom: 20px;
}




.memberss {
    text-decoration: none;
    font-family: 'Alatsi';
    color: #f7f8f9;
    transition: 500ms ease-in-out;
    margin-left:30px;
    margin-right:30px;
}
.memberss:hover {
    color: #292f31;
    padding-top: 20px;
    padding-bottom: 20px;

}



.socialss{
    text-decoration: none;
    font-family: 'Alatsi';
    color: #f7f8f9;
    transition: 500ms ease-in-out;
    margin-left:30px;
    margin-right:30px;
}
.socialss:hover {
    color: #292f31;
    padding-top: 20px;
    padding-bottom: 20px;
}


.contactt {
    text-decoration: none;
    font-family: 'Alatsi';
    color: #f7f8f9;
    transition: 500ms ease-in-out;
    margin-left:30px;
    margin-right:30px;
}
.contactt:hover {
    color: #292f31;
    padding-top: 20px;
    padding-bottom: 20px;
}

/*BANNER*/
.banner {
    background-image: url("https://cdn.discordapp.com/attachments/868146365014876250/868702765906526239/dwwdwdw.jpg");
    padding: 45px;
    object-fit: contain;
    display: block;
    margin:0 auto;
}

.logo1 {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin:auto;
    display: block;
    border-radius: 10px;
    width: 150px;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}

.jawbreaker {
    font-family: 'Zen Dots';
    font-size: 25px;
    color: red;
}
.jawbreaker1 {
    font-family: 'Zen Dots';
    font-size: 25px;
    color: cyan;
}

.sugarrush {
    padding: 25px;
    background-color: #45b5b5;
    display: block;
    margin:0 auto;

}
.sugarrushh {
   font-family: 'Lobster';
   text-shadow: 2px 2px 4px #000000;
   text-decoration: none;
   font-size:25px;
   color: whitesmoke;
   

   transition: 1000ms ease-in-out;
 }
 .sugarrushh:hover {
     font-size: 30px;
     color: rgb(245, 88, 179)
 }
 
 
 body {
    text-align: center;
    
}
.aboutt {
    width: 1024px;
    background-color: #414849;
    text-align: center;
    display: block;
    border-radius: 5px;
    margin-top: 10px;
    margin:0 auto;
    margin-right: 20px;
    margin-left: 20px;
    width: 960px;
}
#About {
    background-color: #141414;
    padding: 100px;
    margin:0 auto;
}

<!DOCTYPE html>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="body.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Alatsi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

<html lang="en">
    <head>
        <title>Jawbreaker SMP</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <div class="nav">
           <nav>
               <a href="#Home" class="homee">Home</a> 
               <a href="#Members" class="memberss">Members</a>
               <a href="#Socials" class="socialss">Socials</a> 
               <a href="#Contact" class="contactt">Contact</a> 
           </nav>
           </div>
          <div class="banner">
            <picture>
              <source srcset="https://cdn.discordapp.com/attachments/552032784890331155/867288559429615636/jawbreakerlogo.png" type="image/webp">
              <source srcset> 
              <img class="logo1" alt="Logo" src=""> <br> <br> <br>
           </picture>
           <span class="jawbreaker">Jaw</span>
           <span class="jawbreaker1">Breaker</span>
          </div>
          <div class="sugarrush">
            <a href="https://media1.tenor.com/images/e71c8574914d2cabb2c6c4bd9ad3af28/tenor.gif" class="sugarrushh">
            Let The Sugar Rush Begin!</a>
          </div>
</head> 
<body>
  <section id="About">
    <div class="aboutt">
      <h3>h</h3>
    </div>
  </section>

</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

这是因为你有一个固定的大小宽度尝试用100% 替换1200px 这将有助于但不能解决问题。为此，我建议您使用 BOOTSTRAP 非常容易实现，只需添加 CDN 行，它就会正常工作。你可以从这里开始Bootstrap tutorials 这将有助于使页面设计与所有设备兼容。

【讨论】：

谢谢！我会期待引导程序