How to perfectly center things in CSS

#css #center #flexbox #justifycontent

To center things perfectly on any and every screen, we’ll be using the powerful flexbox CSS property.

Let’s get started.

Create a new folder called center-things
Navigate into that folder and create an index.html file
Create a styles.css file in the same folder.

Now, Let’s write some basic HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>center things</title>
    <link href="styles.css" rel="stylesheet" />
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="card">
      <div class="text-content">
        <h2 class="name">Nichole Yembra</h2>
        <p class="title">Editor</p>
        <p class="company">Slay magazine</p>
        <p class="phone"><span>T:</span> +234 798 938 3888</p>
      </div>
      <div>
        <img
          src="imglink.com"
        />
      </div>
    </div>
  </body>
</html>

Some notes from the code above.

We have linked our styles.css file to our HTML file.
We are using the Nunito font imported from google fonts.
We also created a card div and within that div, we have 2 divs. one that holds our text-content — with a class name of text-content, and one that holds our image(see the link to the image at the end of this article).

Next, head into the styles.css file. Our first task is to use our fonts from google and to change the background-color. We also need to set the minimum-height of the page to 100vh.

If you do not set the minimum-height to 100vh, your content will end up hanging at the top of the page because it doesn’t know that you want to use the entire screen space.

body {
  min-height: 100vh;
  background-color: wheat;
  font-family: "Nunito", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

Next, we added some css flex properties to the body.

Justify-content:center aligns our content horizontally along the x-axis while align-items:center aligns our content vertically, along the y-axis.

And that’s it. Your content should now be perfectly centred and look like below.

body {
  min-height: 100vh;
  background-color: wheat;
  font-family: "Nunito", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  background: white;
  padding: 10px 20px;
  width: 400px;
  border-radius: 0.5em;
  line-height: 0.3;
  max-height: 300px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.name {
  font-weight: 800;
}

.title {
  font-weight: 600;
  color: #919191;
}

.company {
  margin-top: 2em;
  font-weight: 800;
  color: blue;
}

.phone {
  color: #919191;
  line-height: 0;
  font-size: 0.8em;
}

.text-content > p > span {
  font-weight: 800;
}
img {
  width: 140px;
  height: 140px;
  border-radius: 80%;
}

Now our final page would look like below.