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
17 Replies
Display: flex;
Justify-content: center;
Align-items: center;
min-height: 100vh;
Well I tried that but it causes it to get messed up for some odd reason
Adding "display: flex" causes the entire box to dissapear
Have you given display flex in body? Share your code please
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
Alright let me try this out
body {
Display: flex;
Justify-content: center;
Align-items: center;
min-height: 100vh;
}
If I were to add
To my body it would also mess with the header I have added.
Ok I think I've figured it out
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
.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.
You could also set
display: grid
and place-items: center
on .main-container
.* {
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); }
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); }
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
.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.