Kevin Powell - Community•5mo ago

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

Bishal•5mo ago

Display: flex; Justify-content: center; Align-items: center; min-height: 100vh;

RMON•5mo ago

Well I tried that but it causes it to get messed up for some odd reason

RMON•5mo ago

Adding "display: flex" causes the entire box to dissapear

Bishal•5mo ago

Have you given display flex in body? Share your code please

RMON•5mo 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•5mo 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•5mo ago

Alright let me try this out

Bishal•5mo ago

body { Display: flex; Justify-content: center; Align-items: center; min-height: 100vh; }

RMON•5mo 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•5mo 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•5mo 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•5mo ago

You could also set display: grid and place-items: center on .main-container.

Bishal•5mo 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•5mo 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•5mo 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.

Gaming

Programming

How can I center this box I created?