How to perfectly center things in CSS

How to perfectly center things in CSS

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

Let’s get started.

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

Now, Let’s write some basic HTML.

<!DOCTYPE html>
<html lang="en">
<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" />
<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>

Some notes from the code above.

  1. We have linked our styles.css file to our HTML file.
  2. We are using the Nunito font from google fonts.
  3. We also created a card div and within that div, we have 2 divs. one that holds our text-content named 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 centered and look like below.

with flexbox properties applied

The rest of the styles below are just to get our card looking great!.

Now our final page would look like below.

Final look

The full HTML

Thanks to SLAY for the image used in this tutorial.




Growth at Moni(YC W22) |

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Render HTML to an Image with JavaScript?

BootstrapVue — Table Filtering and Loading

jQuery — Ajax, Animation, and Append

Great New Features in ES2018

Deeply Nested and Possibly Undefined — TypeScript Index Types

Spiral Staircase Going Down To the Undefined

Why React Hooks?

Professional react web application template without configuration

How to Build a Process to Prepare React Junior Developers for Their First Project

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adebola Adeniran

Adebola Adeniran

Growth at Moni(YC W22) |

More from Medium

Creating 3D worlds with HTML and CSS 🌪

A SCREENSHOT OF AN UNLIT ROOM Creating 3D worlds with HTML and CSS.

Why is Flexbox so Important? When to use Grid layout or Flexbox layout? CSS

CSS spec: Cascade Layers — quick introduction and usages

CSS Lesson 3: The Basics of Backgrounds