How can I center this box I created?

Hey there Im working on a project and I wanted to center this container (White Box) how would I go about this correctly? Ignore the "My Portfolio" This isn't actually mine thats just a button to redirect the user to my portfolio
No description
17 Replies
Bishal
Bishal10mo ago
Display: flex; Justify-content: center; Align-items: center; min-height: 100vh;
RMON
RMON10mo ago
Well I tried that but it causes it to get messed up for some odd reason
RMON
RMON10mo ago
No description
RMON
RMON10mo ago
Adding "display: flex" causes the entire box to dissapear
Bishal
Bishal10mo ago
Have you given display flex in body? Share your code please
RMON
RMON10mo ago
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>JS Practice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
<nav>
<ul>
<li><a href="https://arman-markaryan.github.io/Arman-Markaryan/" target="_blank">My Portfolio</a></li>
</ul>
</nav>
</header>

<div class="main-container">
<div class="container">

</div>
</div>

<script src="script.js"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>JS Practice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
<nav>
<ul>
<li><a href="https://arman-markaryan.github.io/Arman-Markaryan/" target="_blank">My Portfolio</a></li>
</ul>
</nav>
</header>

<div class="main-container">
<div class="container">

</div>
</div>

<script src="script.js"></script>
</body>

</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
background: rgb(167, 167, 167);
}

nav {
padding: 25px 25px;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
font-family: Arial, Helvetica, sans-serif;
gap: 25px;
}

nav ul {
flex-wrap: wrap;
list-style: none;
display: flex;
justify-content: flex-end;
margin-right: 30px;
gap: 35px;
}

nav ul li {
display: inline-block;
}

nav ul li a {
font-size: 1.1rem;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline-color: currentColor;
font-style: italic;
letter-spacing: 0.2rem;
}

.main-container {
margin-top: 5rem;
display: flex;
justify-content: center;
align-items: center;
}

.container {
background: #ffffff;
min-height: 40rem;
max-width: 55rem;
border-radius: 1rem;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
background: rgb(167, 167, 167);
}

nav {
padding: 25px 25px;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
font-family: Arial, Helvetica, sans-serif;
gap: 25px;
}

nav ul {
flex-wrap: wrap;
list-style: none;
display: flex;
justify-content: flex-end;
margin-right: 30px;
gap: 35px;
}

nav ul li {
display: inline-block;
}

nav ul li a {
font-size: 1.1rem;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline-color: currentColor;
font-style: italic;
letter-spacing: 0.2rem;
}

.main-container {
margin-top: 5rem;
display: flex;
justify-content: center;
align-items: center;
}

.container {
background: #ffffff;
min-height: 40rem;
max-width: 55rem;
border-radius: 1rem;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
Bishal
Bishal10mo ago
You never ever have to give min-height: 40rem; in .container div Only give min-height in body, that's why entire box is disappeared, it wrapped your component
RMON
RMON10mo ago
Alright let me try this out
Bishal
Bishal10mo ago
body { Display: flex; Justify-content: center; Align-items: center; min-height: 100vh; }
RMON
RMON10mo ago
If I were to add
Display: flex;
Justify-content: center;
Align-items: center;
Display: flex;
Justify-content: center;
Align-items: center;
To my body it would also mess with the header I have added. Ok I think I've figured it out
VinceAggrippino
VinceAggrippino10mo ago
There are lots of ways to center an element. In your case, all you need is margin: auto on .container. Here's how I did it: https://codepen.io/VAggrippino/pen/zYbjmXm I also set a width and height.
RMON
RMON10mo ago
I realized one thing was that the code I wrote was "max" when it should've been "min" once I changed it to "min" it worked as it should.
VinceAggrippino
VinceAggrippino10mo ago
You could also set display: grid and place-items: center on .main-container.
Bishal
Bishal10mo ago
* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; }
body { background: rgb(167, 167, 167); }
nav { padding: 25px 25px; display: grid; align-items: center; grid-template-columns: 1fr auto; font-family: Arial, Helvetica, sans-serif; gap: 25px; }
nav ul { flex-wrap: wrap; list-style: none; display: flex; justify-content: flex-end; margin-right: 30px; gap: 35px; }
nav ul li { display: inline-block; }
nav ul li a { font-size: 1.1rem; font-weight: bold; text-decoration: none; color: #ffffff; outline-color: currentColor; font-style: italic; letter-spacing: 0.2rem; } .main-container { display: flex; justify-content: center; align-items: center; }
.container { background: #ffffff; height: 10rem; width: 20rem; padding: 2rem; border-radius: 1rem; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); }
VinceAggrippino
VinceAggrippino10mo ago
I just prefer grid to flexbox for basic centering because its less typing. To me it also seems more logical ... place-items in the center.
Bishal
Bishal10mo ago
No description
Bishal
Bishal10mo ago
Yeah, both will work but one dimension, usually prefer flex, like if you have complex layout like, 2 dimensional.. or you have to create 2 cards in top in column 1 and column 2 and 3 cards in below that, to wrap this in smaller screen in that complex layout grid plays very smoothly with less number of code as compare to flex.
Want results from more Discord servers?
Add your server