How to perfectly center things in CSS
Tags: css, center, flexbox, justifycontent
Published: 2020-06-30 21:40:25

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.
![perfectly centred page with css](https://miro.medium.com/max/700/1*hj2T-CPHDkzXjKoLUhjydw.png)

```
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.
![adebola css center things on page](https://miro.medium.com/max/672/1*nNzLXbZeIXxnp4IqwkCSaA.png)

Thanks to [SLAY](https://www.slayfestival.com/speaker/nichole-yembra/) for the image used in this tutorial.