Menu

Center DIV elements along X and Y axes

February 19, 2020 - Frontend Development
Center DIV elements along X and Y axes

Sometimes when you get at a design mockup of a website or some mobile application, you might find an element centered horizontally and vertically relative to the screen. For the designer, this might have been easy if they were using, say, Adobe Illustrator or Sketch or Figma — it’s just a matter of two clicks to center design elements. If you’re a developer trying to transform that design into code, you might be face-palming yourself. Well, you might have the horizontal axis covered using either an automatic margin or text-center, but happens to the evil vertical Y-axis?

Stress not! Here are 5 glorious ways to perfectly center your text or div element along both axes.

To set up, let’s first look at what we’ll be working with:

Setting up the canvas.

The golden box within the <body> is our container or parent <div> element inside which we can center more elements. In our examples, we’ll stick to centering text, and elements that may have more child elements.

To set the canvas (the image above) for our example, we’ll use a light gray background for the <body> and use a golden box positioned in the middle within.

Here’s some CSS to get us started.

html {
 height: 100%;
 font-size: 30px;
 box-sizing: border-box;
}
 
body {
 margin: 0;
 padding: 0;
 height: inherit;
 background-color: #e4e4e4;
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
}
 
.parent {
 background-color: goldenrod;
 width: 500px;
 height: 500px;
}
 
.child {
}

We’re all setup for now. Let’s dive into our first method.

Method 1: Using Tables

This method is great if you want to center some text.

<div class="parent">
  <h5>Center Element</h5>
</div>
.parent {
  background-color: goldenrod;
  width: 500px;
  height: 500px;

  display: table;
}

.parent h5 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Here, we have to set the display property of the .parent element to table. Then for the child element (h5), we’ll need to set the display property to table-cell. To vertically center the text, just use the vertical-align: middle CSS property and that’s it!

Note: This is an old-school way and I wouldn’t necessarily recommend this, however, it’s a way nonetheless.

Method 1: Using Tables

Method 2: Grid

This method works much like the one above except it works with more than just text elements — you can center entire block elements inside as well. Also, you don’t need to use any CSS for the .child element to center it. However, a bit of styling for this didn’t really hurt 😉

<div class="parent">
  <span class="child">Centered Element</span>
</div>
.parent {
  background-color: goldenrod;
  width: 500px;
  height: 500px;

  display: grid;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: cornflowerblue;
  padding: 10px;
}

Tip: A shorthand replacement for justify-content: center and align-items: center is a simple one-liner:

place-items: center;
Method 2: Grid

Method 3: Using Positions

For this method, we’ll be using the position values of relative and absolute. You may already know this — to use the position: absolute property for an element correctly, you’ll need to set its parent’s position property value to anything that is not static.

<div class="parent">
  <span class="child">Centered Element</span>
</div>
.parent {
  background-color: goldenrod;
  width: 500px;
  height: 500px;

  position: relative;
}

.child {
  background-color: cornflowerblue;
  padding: 10px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

Tip: The translate values are a really cool way to center elements without having to bother about calculating the height or width of the element and then subtracting half of those values from the top and left values. The -50% translate values automatically calculate this for you.

Method 3: Using Positions

Method 4: Using Flex

This is currently the most popular way to center elements. Let’s look at the code.

<div class="parent">
  <span class="child">Centered Element</span>
</div>
.parent {
  background-color: goldenrod;
  width: 500px;
  height: 500px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: cornflowerblue;
  padding: 10px;
}
Method 4: Using Flex

Here again, we do not need to use any CSS for the .child element to center it.


Method 5: Using Margin Auto

Now that we understand how the display properties of grid and flex work, let’s look at the following code.

<div class="parent">
  <span class="child">Centered Element</span>
</div>
.parent {
  background-color: goldenrod;
  width: 500px;
  height: 500px;

  display: grid;
}

.child {
  background-color: cornflowerblue;
  padding: 10px;

  margin: auto;
}

Here, the display property for the .parent element can be set to use either grid or flex values. For the .child element, simply set the margin to auto to center it along both the X and Y axes.

Method 5: Using Margin Auto

There you have it! 5 really great ways to show your designer who’s boss!

A big shoutout to Kevin Powell for helping me learn cool new things and being a source of inspiration!

7 thoughts on “Center DIV elements along X and Y axes

cbd oil

Great post. I was checking continuously this blog and I’m impressed!
Extremely useful information specifically the last part
🙂 I care for such information much. I was looking for this certain info for a long time.

Thank you and best of luck.

Reply
Verona Pasco

people of blogging, that really how to do blogging

Reply
cbd

Good post! We are linking to this particularly great post on our site.
Keep up the good writing.

Reply
Mckenzie Odonell

Hello there. I discovered your web site by means of Google whilst searching for a related subject, your site came up. It seems to be great. I have bookmarked it in my google bookmarks to come back then.

Reply
AffiliateLabz

Great content! Super high-quality! Keep it up! 🙂

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *