-1

I apologize in advanced because I know this is a very basic, newbie mistake - but no matter what I add to this, my main container will not center in the page. I know there's plenty of ways to achieve this goal, but ultimately I'm trying to practice 'good coding' habits, and making this efficient as possible ( as opposed to many margins and paddings ). The goal is to eventually have it look like this:

enter image description here

Here's my code ( so far ):

<!DOCTYPE html>
<html>
<head>
 
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
 
<!-- BROWSER TITLE -->
<title>cookiess</title>
<!-- END OF BROWSER TITLE -->
 
<!-- BROWSER ICON -->
<link rel="shortcut icon" href="https://66.media.tumblr.com/e948812964cb16505f4cd4f894344288/672e88b582120b94-84/s540x810/9301ad0a7a1dc0235256ca2aa89738258b0383a5.png">
<!-- END OF BROWSER ICON -->
 
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,900,700,700italic,500italic,500' rel='stylesheet' type='text/css'>
<!-- END OF FONTS -->

<!-- SMOOTH SCROLL SCRIPT -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
<!-- END OF SMOOTH SCROLL SCRIPT -->

<!-- SCROLL TO TOP BUTTON -->
<button onclick="topFunction()" id="stt" title="Go to top">Top</button>
<!-- END OF SCROLL TO TOP BUTTON -->

<style type="text/css">

body { background-color:#e6eaeb;
color:#e6eaeb;
font-family:'Roboto', sans-serif;
font-size:10px;
text-align:left;
word-spacing:3px;
text-transform:uppercase; }

/* SELECTION */
::selection { background:#ff40f3; }
::-moz-selection { background:#ff40f3; }
/* END OF SELECTION */
 
/* SCROLLBAR */
::-webkit-scrollbar-thumb { background:#ff62f5;
border-radius:25px;linear-gradient(to bottom, #b1e0f5 , #ffc4f6);
width:8px;
height:5px; }
 
::-webkit-scrollbar { background:#292929;
border-radius:25px;
height:5px;
width:8px; }
/* END OF SCROLLBAR */

/* SCROLL TO TOP BUTTON */
#stt { position: fixed; /* Fixed/sticky position */
z-index:99999999999999;
display: none; /* Hidden by default */
top:613px; /* Place the button at the bottom of the page */
left:1029px; /* Place the button 30px from the right */
border: none; /* Remove borders */
outline: none; /* Remove outline */
font-family:'Bowlby One', cursive;
background-color: #02afff; /* Set a background color */
color:#e6eaeb;
cursor: pointer; /* Add a mouse pointer on hover */
padding:8px;
border-radius: 15px; /* Rounded corners */
text-transform:uppercase;
text-align:center;
font-size: 9px; /* Increase font size */ }
/* END OF SCROLL TO TOP BUTTON */

.maincontainer { background-color:#313131;
width:785px;
height:472px;
color:#313131;
border-top:25px solid #02afff;
border-bottom:25px solid #02afff;
margin:auto;
-webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
-moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39); }

#wave { position:fixed;
z-index:-100;
width:100%;
bottom:-3px;
background-repeat:repeat-x;
left: 0px;
right: 0px; }

</style>
</head>
  <body>
  <div id="wave">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
         <path fill="#ffa6f9" fill-opacity="1" d="M0,192L34.3,176C68.6,160,137,128,206,149.3C274.3,171,343,245,411,256C480,267,549,213,617,192C685.7,171,754,181,823,186.7C891.4,192,960,192,1029,202.7C1097.1,213,1166,235,1234,240C1302.9,245,1371,235,1406,229.3L1440,224L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"></path>
    </svg>
</div>

 <div class="maincontainer">Hi there!</div>
  </body>
</html>
NR 15
  • 77
  • 1
  • 11
  • 2
    Does this answer your question? [How to center an element horizontally and vertically](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) – Universal Omega Jun 22 '20 at 00:56
  • Check this tutorial for aligning a div horizontally and vertically using CSS: https://frontendguruji.com/blog/how-to-center-a-div-horizontally-and-vertically-using-css/ – Mandeep Pasbola Jan 02 '22 at 17:35

1 Answers1

4

The best way to center things is either using flexbox or grid layout. They both provide responsive styles rather than you having to change the layout for every device.

To center a div on a page you could apply the following styles:

.center{
display:flex; 
justify-content:center;
align-items:center;
height:100vh;
}

This uses flexbox to achieve the layout notice the display:flex

If you apply this to a div it will make it 100 viewport height (take up 100% of the screen) and everything inside will be centered.

Here is a jsfiddle (example)

Jacques
  • 927
  • 9
  • 18