绝对定位时如何让内容居中？

Question

如上所述，我（为了好玩）重新创建了一个网站 (hologram.io)，因为我是 CSS 的新手，只是想看看我自己可以做什么帮助...但我不知道如何定位整个第一部分，它是绝对的（-> 在图像之上）中心，中心。如此垂直和水平，所以在更大的屏幕上它总是完美地位于菜单的中心......在其他不是绝对的部分，我使用了 display: flex, justify-content: center 和 align-items center，它完美运行...在我提供的屏幕截图中，您可以看到问题...此外，还将包含代码。看起来有点乱，不过应该没问题哈哈...

Here you can see the noncentered Absolute item Here you can see the flex items which are perfectly centered on every screensize and And here for Refernce is the hologram website...

@font-face {
  font-family: Robert Sans;
  src: url(RobertSans-Regular.ttf);
}

#navtextonly li {
  list-style-type: none;
  display: inline;
  padding: 15px;
  text-align: center;
}

.listitem:hover {
  cursor: pointer;
  color: #4e6cff;
}

#hologramlogo {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 0px;
  padding-right: 0px;
}

nav {
  background-color: rgb(255, 255, 255);
}

body {
  margin: 0px;
  font-family: Robert Sans;
}

#navbarouter {
  display: flex;
  align-items: center;
  justify-content: center;
}

#navtextonly {
  white-space: nowrap;
}

#mainmenuwobtnlogo {
  margin-right: 100px;
}

ul {
  font-size: 16px;
}

#buttonsmenu1 {
  background-color: white;
  border: 1px solid #4e6cffce;
  padding: 12px 23px 12px 23px;
  border-radius: 25px;
  margin-right: 15px;
  -webkit-box-shadow: 2px 2px 15px 1px #999999;
  box-shadow: 2px 2px 15px 1px #999999;
}

#buttonsmenu1:hover {
  border-color: #111;
  cursor: pointer;
}

#buttonsmenu2 {
  background-color: #4e6cff;
  padding: 12px 23px 12px 23px;
  color: white;
  border-radius: 25px;
  -webkit-box-shadow: 2px 2px 15px 1px #999999;
  box-shadow: 2px 2px 15px 1px #999999;
}

#buttonsmenu2:hover {
  background-color: #788fff;
  color: white;
  cursor: pointer;
}

.buttonsmenuouter {
  margin-left: 25px;
}

#hamburgernav {
  display: none;
}

#backgroundverlauf {
  height: 800px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.mainheading {
  font-size: 64px;
  white-space: nowrap;
  font-weight: 400;
}

#h1top,
#h1bottom {
  margin: 0px;
  padding: 0px;
}

article {
  color: rgb(255, 255, 255);
  max-width: 550px;
}

#ellipse {
  position: absolute;
  top: 0px;
  left: 630px;
}

#drohnepng {
  position: absolute;
  top: -50px;
  left: 880px;
  height: 80px;
}

#cartpng {
  position: absolute;
  top: 80px;
  left: 585px;
  height: 250px;
}

#rollerpng {
  position: absolute;
  top: 140px;
  left: 825px;
  height: 440px;
}

#content1 {
  position: absolute;
  top: 250px;
  left: 12%;
}

#outerouter {
  max-width: 1300px;
}

#glowh1 {
  background: linear-gradient(
    -60deg,
    #904e95,
    #904e95,
    #e73c7e,
    #ee7752,
    #4e6cff,
    white
  );
  background-size: 600%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: animate 10s linear infinite;
}

@keyframes animate {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 600%;
  }
}

#paragraph {
  width: 390px;
  color: rgb(199, 199, 199);
  font-size: 20px;
  margin-bottom: 30px;
}

#emailwithsubmit {
  display: flex;
}

.emailfeld {
  width: 100%;
  padding: 18px 23px 18px 23px;
  border-radius: 25px 26px 26px 25px;
  border-width: 0px;
  border: 1px red solid;
}

#submitbtn {
  padding: 18px 35px 18px 35px;
  border-radius: 25px 25px 25px 25px;
  color: white;
  font-weight: 600;
  border-width: 0px;
  background-image: linear-gradient(90deg, #00a6ff, #7831ca, #fe17c0);
  position: relative;
  left: -60px;
}

#mainpart2,
#mainpart3 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 100px 60px 100px 60px;
}

#mainpart2-3outer {
}

#card {
  margin-left: 60px;
  margin-right: 100px;
  height: 280px;
  /* -webkit-animation: fadein 3.2s both;
  -moz-animation: fadein 3.2s both;
  -o-animation: fadein 3.2s both;
  animation: fadein 3.2s both; */
  animation: float2 6s ease-in-out infinite;
}


@keyframes float2 {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translatey(0px);
  }
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-25px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes fadein {
  0% {
    opacity: 0;
    -moz-transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}

@-0-keyframes fadein {
  0% {
    opacity: 0;
    -o-transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

#ellipse {
  -webkit-animation: fade 5s both;
  -moz-animation: fade 5s both;
  -o-animation: fade 5s both;
  animation: fade 5s both;
}

@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-0-keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#cartpng,
#drohnepng,
#rollerpng {
  /*  -webkit-animation: fadein 3.2s both;
  -moz-animation: fadein 3.2s both;
  -o-animation: fadein 3.2s both;
  animation: fadein 3.2s both;
  transform: translatey(0px); */
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-50px);
  }
  100% {
    transform: translatey(0px);
  }
}

#mainh-1,
#mainp-1 {
  max-width: 280px;
}

#mainh-2,
#mainp-2 {
  max-width: 280px;
}

.main1h,
.main1p,
.main2h,
.main2p {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#mainh-3,
#mainp-3 {
  max-width: 280px;
}

#mainh-4,
#mainp-4 {
  max-width: 280px;
}

#mainh-1,
#mainh-2,
#mainh-3,
#mainh-4 {
  margin: 0px;
  padding: 0px;
}

#textmainpart2 {
  margin-right: 60px;
}

.main2h1 {
  margin-bottom: 40px;
}

.contentmainpart3-1 {
  max-width: 475px;
  margin-left: 60px;
}

.contentmainpart3-2 {
  margin-right: 60px;
}

#beforefootercentered {
  text-align: center;
  margin-bottom: 75px;
}

.beforefootercolumncontent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 100px;
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 50px;
}

.beforefootericons {
  height: 66px;
  width: 66px;
}

#beforefootercolumncontent1,
#beforefootercolumncontent2,
#beforefootercolumncontent3 {
  max-width: 280px;
  text-align: center;
}

#list2banner {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

#list1bannerouter {
  max-width: 725px;
}

.footerbanner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-image: linear-gradient(90deg, #7831ca, #00a5ff);
  margin: 0px 190px 0px 190px;
  border-radius: 10px;
  padding-left: 30px;
  padding-top: 25px;
  padding-right: 30px;
  padding-bottom: 50px;
  color: white;
  position: relative;
  top: 100px;
}

.footerbanner h2 {
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 10px;
}

#list1banner {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

#list1banner li:before {
  content: "✓";
  padding-right: 5px;
}

#btn1,
#btn2 {
  border-radius: 25px;
  padding: 10px 20px 10px 20px;
}

#btn1 {
  margin-right: 20px;
  background-color: #111;
  border-width: 0px;
}

#btn2 {
  background-image: transparent;
  border: 1px solid white;
}

#pfeil {
  margin-left: 5px;
}

#mainfooter {
  height: 600px;
  background-color: #0a1435;
}

#mainfooterupper {
  height: 100px;
  background-color: #0a1435;
  display: none;
}

.item1 {
  margin-right: 20px;
}

#placehold {
  position: absolute;
  top: 3100px;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(255, 255, 255);
  font-size: 70px;
}

@media only screen and (max-width: 1350px) {
  html,
  body {
    overflow-x: hidden;
  }
  body {
    position: relative;
  }

  #navtextonly {
    font-size: 14px;
  }

  li {
    padding-right: 20px;
  }

  #mainmenuwobtnlogo {
    margin-left: 0px;
    margin-right: 0px;
  }

  #navbarouter {
    display: flex;
  }

  #hologramlogo {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
    width: 120px;
  }

  .buttonsmenuouter {
    margin-left: 25px;
    font-size: 14px;
    margin-right: 0px;
  }

  #buttonsmenu1,
  #buttonsmenu2 {
    padding: 9px 17px 9px 17px;
  }

  #backgroundverlauf {
    height: 800px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media only screen and (max-width: 990px) {
  html,
  body {
    overflow-x: hidden;
  }
  body {
    position: relative;
  }

  #navtextonly {
    display: none;
  }

  #navbarouter {
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    justify-content: space-between;
  }

  #hologramlogo {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
  }

  .buttonsmenuouter {
    margin-left: 0px;
  }

  #hamburgernav {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    display: inline;
  }

  #backgroundverlauf {
    height: 800px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .mainheading {
    font-size: 50px;
  }

  #paragraph {
    font-size: 19px;
  }
}

@media only screen and (max-width: 570px) {
  .mainheading {
    font-size: 30px;
  }
  #paragraph {
    font-size: 16px;
  }

  #content1 {
    position: absolute;
    top: 175px;
  }

  article {
    color: rgb(255, 255, 255);
    max-width: 500px;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
  }
  #floatingimages {
    display: none;
  }
  #paragraph {
    width: 300px;
    color: rgb(199, 199, 199);
    font-size: 16px;
    margin-bottom: 30px;
  }
  #backgroundverlauf {
    height: 500px;
  }
  .emailfeld {
    width: 80%;
    padding-bottom: 20px;
    padding: 13px 20px 13px 20px;
    border-radius: 25px 26px 26px 25px;
    border-width: 0px;
    border: 1px red solid;
  }

  #submitbtn {
    width: 87%;
    position: absolute;
    left: 10px;
    top: 280px;
    padding-bottom: 20px;
    padding: 13px 20px 13px 20px;
    border-radius: 25px 26px 26px 25px;
    border-width: 0px;
    border: 1px red solid;
    /*
    padding: 13px 30px 13px 30px;
    border-radius: 25px 25px 25px 25px;
    color: white;
    font-weight: 600;
    margin-left: 0px;
    border-width: 0px;
    background-image: linear-gradient(90deg, #00a6ff, #7831ca, #fe17c0);*/
  }
  #emailwithsubmit {
    display: flex;
    gap: 13px;
    flex-direction: column;
    align-items: center;
  }
}

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles2.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index2</title>
  </head>

  <div>
    <nav>
      <div id="navbarouter">
        <img
          id="hologramlogo"
          src="610f51dabc2bd752a968dfac_Hologram Logo Black Text.svg"
          alt="Logo"
          width="130px"
        />
        <ul id="navtextonly">
          <li class="listitem">Cellular IoT</li>
          <li class="listitem">Why Hologram</li>
          <li class="listitem">Resources</li>
          <li class="listitem">Plans</li>
          <li class="listitem">Jobs</li>
          <li class="listitem">Store</li>
          <span class="buttonsmenuouter">
            <li id="buttonsmenu1">Contact Sales</li>
            <li id="buttonsmenu2">Sign in</li>
          </span>
        </ul>
        <div id="hamburgernavouter">
          <img id="hamburgernav" src="hamburgernav.svg" alt="hamburgernav" />
        </div>
      </div>
    </nav>
    <div id="outerouterouter">
     <img
        src="background1.png"
        id="backgroundverlauf"
        alt="backgroundverlauf"
      />
      <div id="outerouter">
      <div id="content1">
    <article>
     <h1 class="mainheading" id="h1top">Internet everywhere.</h1>
     <p class="mainheading" id="h1bottom">For every<span id="glowh1">thing</span>.</p>
     <p id="paragraph">Spend less time monitoring your IoT deployments and more time innovating. Hologram's cellular platform enables you to connect and manage any device, anywhere in the world.</p>

    <div id="emailwithsubmit">

    <input type="email" class="emailfeld" autocomplete="email" maxlength="256" name="Email" data-name="Email" placeholder="E-Mail-Adresse" id="email" data-validation="email required email length" required="" data-validation-event="keyup change" data-validation-length="max256">
    <input type="submit" value="Get started" data-wait="Please wait..." class="c-button is--gradient w-button disabled" disabled="disabled" id="submitbtn">
 
    </div>

</article>

<div id="floatingimages">
  
<img class="sideimages" id="ellipse" src="backgroundellipse.png" alt="ellipse">
<img class="sideimages" id="drohnepng" src="drohne.png" alt="drohne">
<img class="sideimages" id="cartpng" src="cart.png" alt="cart">
<img class="sideimages" id="rollerpng" src="roller.png" alt="roller">

</div>

</div>
</div>
</div>

<div id="mainpart2-3outer">

<div id="mainpart2">

<div id="cardcontainer">
<img id ="card" src="card.png" alt="card">
</div>

<div id="textmainpart2">

<h1 class="main2h1"> Testüberschrift: global IoT connectivity platform</h1>

<div class="main1h">
<h2 id="mainh-1">One global SIM card</h2>
<h2 id="mainh-2">Automatic carrier switching</h2>
</div>

<div class="main1p">
<p id="mainp-1">Connect to 470+ networks in 200 countries using a single hardware-agnostic SIM card or eSIM eUICC chip. </p>
<p id="mainp-2">Hologram SIMs automatically switch between local carriers to ensure you have top performance and never lose service.</p>
</div>

<div class="main2h">
<h2 id="mainh-3">Flexible, scalable pricing</h2>
<h2 id="mainh-4">Connectivity tools for your team</h2>
</div>

<div class="main2p">
<p id="mainp-3">No contracts, quotas, or negotiations. Activate, change, or pause plans anytime via our Hologram Dashboard or APIs.</p>
<p id="mainp-4">Collaboratively manage your fleet with ease via our easy-to-use Dashboard or our modern REST API.</p>
</div>

</div>

</div>

<div id="mainpart3">

<div class="contentmainpart3-1">
<img src="hyper.svg" alt="hyper">
<h1>Testüberschrift2: flexibility and coverage with Hyper</h1>
<p>Future-proof your SIMs and scale faster globally with Hyper, Hologram’s eUICC SIMs and platform. Hyper provides over-the-air, updatable access to Hologram’s full portfolio of IoT connectivity partners and profiles.</p>
<p>What is Hyper? --></p>
</div>

<div class="contentmainpart3-2">
<img src="image maincontent3.png" alt="ballwiththingsmainpart3right" height= "570px">
</div>

</div>
</div>

<div id="beforefootercentered">
 <h1>Scaling connectivity has never been so easy</h1>
 <p>The simplest way to get your IoT deployment connected worldwide.</p>
</div>


<div class="beforefootercolumncontent">

  <div id="beforefootercolumncontent1">
 <img src="antenne.svg" loading="lazy" alt="cell tower icon" class="beforefootericons">
 <h3 class="">No hassles or headaches</h3>
 <p class="">Focus on your product and data — not connectivity infrastructure, negotiations, and pricing.</p>
</div>

<div id="beforefootercolumncontent2">
 <img src="speedometer.svg" loading="lazy" alt="dashboard icon" class="beforefootericons">
 <h3 class="">Ready to grow your business</h3>
 <p class="">Manage global deployments from a single connectivity platform with pricing that scales as you do.</p>
 </div>
 
 <div id="beforefootercolumncontent3">
 <img src="settings.svg" loading="lazy" alt="gear icon" class="beforefootericons">
 <h3 class="">All the tools you need</h3>
 <p class="">Our Hologram Dashboard, REST API, and supported hardware make integrating connectivity easy.</p>
</div>

</div>

<footer>

<div id="mainfooterupper"></div>

  <div class="footerbanner">
    
  <div id="list1bannerouter">
   

  

  <h2>Try Hologram today.</h2>

  <ul id="list1banner">
    <li class="item1">Free Sim</li>
    <li class="item1">1 MB/mo free</li>
    <li>Connect and scale in days</li>
  </ul>

  </div>

  <div id="list2banner">
      <div id="btn1">Sign up free<img id="pfeil" src="pfeil.svg"></div>
      <div id="btn2">Contact sales <img id="pfeil" src="pfeil.svg"></div>
  </div>

  </div>
  <div id="mainfooter">

<h1 id="placehold">Footer Items Soon</h1>


  </div>
</footer>

</main>
  </body>
</html>

Answer 1

将此用于您的容器[绝对]元素

.container{
     position: absolute;
     /* For Vertically center */
     top: 50%;
     transform: translateY(-50%);
    
     /* For Horizontally center */
     left: 50%;
     transform: translateX(-50%);
}

如果您使用高度和宽度而不使用定位，请使用此

.container{
  --height: 100px;
  height: var(--height);

  /* Horizontally Center */
  margin: auto;

  /* Vertically Center */
  margin-top: calc(50% - var(--height));
}

绝对定位时如何让内容居中？

How do I get the content centered when In absolute positioning?

html

css

css-position

absolute

flexbox