Get my "Container" Centered Vertically on Page

Get my "Container" Centered Vertically on Page
0

#1

Hi folks!
Previously, I was having problems getting the logo on my page to stop increasing in distance from the button below it, while the page is resized responsively. I then finally fixed that probem. However after I fixed that I found another problem! Thanks in advance for your help!

My content isn’t exactly centered on the page…see description below!

This is how my page looks now…

And this is how I want it to look…

See CSS code here:

.container{
 /*border: 1px solid red;*/
 width: 500px;
 height:700px; 
 position: absolute;
 top: 30%;
 left: 50%;
 margin-right: -50%;
 transform: translate(-50%, -50%);
}

.top-box{
/*border: 1px solid red;*/
width:400px;
height: 200px; 
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}

.logo{
width: 150px;
height: 101px;
 background-image: url("https://s15.postimg.cc/xupnhm8e3/EQ_Logo2.jpg");
background-repeat: no-repeat;
background-size: 150px 101px;
border-radius: 7px;
margin: auto;
display: inline-block;
}

h2{
text-align: center;
color: white;
font-family: "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin-top: 15%;
display: inline-block;
font-size: 2.75em;
}

h4{
  color: white;
  position: absolute;
  top: 60%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;

}

.title{
  width: 500px;
  height: 100px;
  position: absolute;
  left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

.ThreeD-CAD-MODEL{
background-image: url("https://s15.postimg.cc/ssa5m1azv/EQit_Network_Button_2.png");
background-repeat: no-repeat;
width:400px;
height: 405px;
position: absolute;
top: 83%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}

.container-fluid{
/*border: 1px solid green;*/
width:320px;
height: 320px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #000;
box-shadow: 1px 3px 2px #444, inset 0px 0px 12px 0px #fff;
cursor: pointer;
border-radius: 20px;
}

.container-fluid:active {
   box-shadow:inset 0 1px 3px rgba(0,0,0,1);
  color: #000;
}

.holder{
/*border: 1px solid green;*/
width:310px;
height: 310px;
text-align: center;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

.circle{
width:220px;
height: 220px;
border: 30px solid #0cff00; /*might make a change to this with power-off green: #008000*/
box-shadow: -1px 0px 25px 7px #0cff00;
border-radius: 100%;
text-align: center;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}

.glow-off{
	box-shadow: none;
    border: 30px solid #0cff00;
}

.vertical-rectangle{
width:30px;
height:150px;
background-color: #0cff00;
box-shadow: -1px 0px 15px 7px #0cff00;
position: absolute;
border-radius: 5px;
top: -25px;
left:95px;
}

.glow-off2{
	box-shadow: none;
}

.make-it{ /*enables shape-form for power button*/
    height: 0;
    width: 80px;
    background-color: transparent;
    border-top: 80px solid #000000;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
position: absolute;
left: 40px; 
top: -45px;
}



body{
background-color: #000;
}

/*....................media queries..........................*/

/*
@media(max-width: 320px)and (max-width: 470px) {
  .top-box{
  position: absolute;
  top: 35%;
  }
}
*/

#2

I usually just use css flex to do this.
Just make sure you set the flex direction to column, and push the elemts to the center (you may need to play with space around setting as well)


#3

@hbar1st, hmmm…will try that out and see what happens, and let you know. :grinning:
Infact, where should I insert flex?


#4

You add it to your container. Use this ref if you get stuck


#5

@hbar1st I hate flex-box! LOL


#6

you’re gonna love it after it centers your stuff in two to three lines!