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

Question

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

在这里您可以看到非居中的 Absolute 项目在这里您可以看到在每个屏幕尺寸上都完美居中的 flex 项目，这里供参考的是全息图网站...

 @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[absolute] 元素

.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));
}