Whether you’re building a site from scratch or with the Bootstrap CSS framework, you’ll need to have a basic understanding of HTML and CSS to create and customize your layouts.

A major challenge of building layouts is arranging divs and other block elements on the page. Do you want the elements to overlap or have space between them? Do you want the layout to be responsive? These are just a few questions you’ll have to address as you code.

In this post, we’ll cover one of the most common questions from newbie coders: how do I center a div in CSS?

Free Intro Guide to HTML & CSS [Download Now]

How to Center a Div in CSS

You can center a div in a few different ways in CSS. While it’s easy to center a div horizontally on a page, it’s trickier to do so vertically (but still manageable!). We’ll walk through both these methods below and then explain how you can center a div within another div.

Examples included throughout are built on W3Schools’s Tryit Editor. You can click on any of the source links to view the example in full.

How to Center a Div Horizontally

To center a div horizontally on a page, simply set the width of the element and the margin property to auto. That way, the div will take up whatever width is specified in the CSS and the browser will ensure the remaining space is split equally between the two margins.

Let’s take a look at a basic example of a CSS box model that has a horizontally centered div.

Say you want to create a div element with a short paragraph inside and a yellow border around it. In your HTML, you’d give the div a class name like “center.” You can then use the CSS selector .center to style it with the margin, width, border, and padding properties.

Note that, unlike the margin property, the CSS padding property is used to create space between the border of the div and the paragraph within the div (the inline element). You can learn more about the difference between CSS margin vs. padding if you’re confused.

Here’s the CSS:

 

 

   .center {

  margin: auto;

  width: 60%;

  border: 5px solid #FFFF00;

  padding: 10px;

}

Here’s the HTML:

 

 

   <div class="center">

  <p>This div takes up the width specified in CSS and the remaining space is split equally between the two margins.</p>

</div>

Here’s the result:

A div horizontally centered on the page in W3Schools's Tryit Editor

Image Source

How to Center a Div Vertically

To center a div vertically on a page, you can use the CSS position property, the left and top properties, and the transform property. Start by setting the position of the div to absolute so that it’s taken out of the normal document flow.

Then set the left and top properties to 50%. This tells the browser to line up the left and top edge of the div with the center of the page horizontally and vertically (ie. 50% to the right and down the page). Here’s the problem: having the edges of the div lined up in the middle of the page will make the div look off-center. Here’s an example.

A div with its top and left edge vertically centered on the page in W3Schools's Tryit Editor

Image Source

To truly center a div, you need to define one last property, known as the CSS transform property. While there are nine different transformation methods (and this is not even including 3D transforms), you want to use the translate() method to move the div along the X- and the Y-axis. Specifically, you want to move the div 50% to the left and up from its current position. That will tell the browser to put the center of the div in the center of the page.

Let’s take a look at the code you’d need to write.

Here’s the CSS:

 

 

   .center {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  border: 5px solid #FFFF00;

  padding: 10px;

}

Here’s the HTML:

 

 

   <div class="center">

  <p>This div is vertically and horizontally centered.</p>

</div>

Here’s the result:

A div vertically centered on the page in W3Schools's Tryit Editor

Image Source

How to Center a Div Within a Div

You can center a div child element within a div parent element with Flexbox. Flexbox is a great method since it’s responsive and doesn’t require margin calculations — but there are a few extra steps to keep in mind.

To center a div horizontally and vertically with Flexbox, you need to set the height of the HTML, body, and parent container to 100%. Additionally, you need to define the parent container as a flex container. You can do this by setting the display property to “flex.” Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.

You can learn more about the layout module Flexbox by reading Here's the Difference Between Flexbox, CSS Grid, & Bootstrap. For now, let’s just look at an example.

In the example below, we'll center a div with a yellow background color, instead of a border, and no text inside. It will look like a yellow square instead.

Here’s the CSS:

 

 

html,

body {

  height: 100%;

}

.parent {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}

.center {

  background-color: #FFFF00;

  width: 200px;

  height: 200px;

}

Here’s the HTML:

 

 

   <div class="parent">

  <div class="center"></div>

</div>

Here’s the result:

A div centered within a div with Flexbox in W3Schools's Tryit editor

Image Source

Building Custom Layouts

Whether you’re looking to center a div horizontally, vertically, or within another div, a bit of coding knowledge will allow you to control and customize your layouts. Understanding the margin, positioning, and flex property, for example, will enable you to center virtually any div or block element on a page.

If you’re just starting to learn HTML, CSS, and JavaScript, however, the steps outlined above might seem too complicated. In that case, you can always use a drag-and-drop builder like Elementor. With features like vertical and horizontal alignment and inline positioning, Elementor simplifies every step of the build process so you don’t have to code a single line.

New Call-to-action

 css introduction

Originally published Jul 13, 2020 7:00:00 AM, updated July 13 2020

Topics:

Bootstrap & CSS