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

Question

So as said above, I have (for fun) recreated a website (hologram.io), because I'm new to CSS, and just wanted to see what I can do myself without help... But I can't figure out how I can position the whole first section which is absolute (-> On top of an Image) center, center. So vertical and horizontal, So that on bigger screens it always stays perfectly in the center of the menu... On the other sections which are not absolute, I used display: flex, justify-content: center and align-items center, which works perfectly... On the screenshots I have included, you can see the problem... Also, will include the code. It looks a bit messy, but should be fine haha...
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

Use this to your container[absolute] element
.container{
position: absolute;
/* For Vertically center */
top: 50%;
transform: translateY(-50%);
/* For Horizontally center */
left: 50%;
transform: translateX(-50%);
}
If You're using height and width without positioning use this
.container{
--height: 100px;
height: var(--height);
/* Horizontally Center */
margin: auto;
/* Vertically Center */
margin-top: calc(50% - var(--height));
}