11 Ways to Center Div or Text in Div in CSS

Whether you’re building a site from scratch or with a website builder, it helps to have at least a basic understanding of HTML and CSS to create and customize your page layouts.

A major challenge of building layouts is arranging and styling elements on the page. Do you want the elements to overlap or have space between them? Do you want some text on the page to be centered and the rest left-aligned? Do you use plain CSS or a framework like Bootstrap? These are just a few questions you’ll have to address as you code. Thankfully, divs can help.

In this post, we’ll cover multiple methods for centering elements in CSS, including:

• What is a div and why center a div?
• How to center text in a div?
  • Horizontally
  • Vertically
• How to center a div?
  • Horizontally
  • Vertically
  • Horizontally and Vertically
  • Within a div
    
    

What is a div and why center a div?

A div — short for content division elements — is a generic block-level HTML element. Divs can divide your web page into sections so you can target them with CSS.

For example, say you want to include a block quote in your blog post that is centered instead of left-aligned like the rest of the body text. In this case, you can wrap the text in a div element and apply CSS to that specific element. The other text on the page would remain unchanged.

Understanding how to center divs and text in divs, in particular, is a valuable skill for beginner programmers. It helps prevent content from stretching out to the edges of its container, overlapping with other elements on the page, or other issues that arise when creating web page layouts.

However, centering elements in HTML and CSS isn’t as simple as hitting a “center” button —there are actually several ways to do it. Let’s dive in.

How to Center Text in Div in CSS

With CSS, you can center text in a div in multiple ways. The most common way is to use the text-align property to center text horizontally. Another way is to use the line-height and vertical-align properties. The final way exclusively applies to flex items and requires the justify-content and align-items properties. Using this method, you can center text horizontally, vertically, or both.

We'll take a closer look at each method below.

How to Center Text in Div Horizontally

There are two ways to center text in a div horizontally. Let's take a look at examples of each method below.

Using the Text-Align Property

In most cases, you can center text horizontally in a div using the text-align property with the value center.

Say you want to create a div with a short paragraph inside it. In your HTML, you can assign the div a class like center. You can then use the CSS selector .center to style it with the text-align property

See the Pen align center: text-align center by HubSpot (@hubspot) on CodePen.

Using the Justify-Content Property

There's one exception to the rule above: If you are using the display property to define your div as a flex container, then you can't use the text-align property to center text horizontally inside the div. Instead, you have to use the justify-content property with the value center.

Let's create the same div element as above. This time, define the display property as flex to make the div a flex container and define the justify-content property as center.

Featured Resource: Intro Guide to CSS & HTML

Download the Free CSS Guide

Here’s the result:

See the Pen align center: flex text by HubSpot (@hubspot) on CodePen.

How to Center Text in Div Vertically

Centering text vertically inside a div is a bit more complicated than horizontally, but there are a few ways to do it. We’ll take a look at each method next.

Using the Padding Property

In most cases, you can center text vertically in a div using the padding property. With this method, padding will take two values. The first value will set the top and bottom padding. The second will set the right and left padding. Since you want to center the text vertically, the first value can be any positive length or percentage value. The second value should be 0.

See the Pen align center: vertical padding text by HubSpot (@hubspot) on CodePen.

Using the Line-Height Property

Usually, you can also center text vertically inside a div with line-height property.

In your HTML, add a paragraph element inside the div, then set the line-height property of the div equal to the height of the div.

To center a paragraph with multiple lines, set display of the paragraph to inline-block, set line-height to normal, and set vertical-align to middle. This ensures that the text inside the div is centered vertically, whether it's one line or multiple lines of text.

See the Pen align center: vertical line height text 1 by HubSpot (@hubspot) on CodePen.

Using the Align-Items Property

If you are using the display property to define your div as a flex container, then you can't use the method above to center text vertically within the div. Instead, you have to use the align-items property with the value center.

Let's create the same div as above, giving it the class name .center. Set display to flex to make the div a flex container. To more clearly see that the text is vertically centered, define the height property as well. Otherwise, the flex container will only be as tall as it needs to be to contain the paragraph inside. Then, set the align-items property to center.

See the Pen align center: vertical align text flex by HubSpot (@hubspot) on CodePen.

How to Center a Div in CSS

You can center a div in a few different ways in CSS. It’s easy to center a div horizontally on a page, and a bit trickier to do so vertically (but still possible).

We’ll walk through both these methods below, then explain how you can center a div horizontally and vertically or center a div within another div.

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 splits the remaining space equally between the margins on either side.

Let’s look at a simple example of a CSS box model. Say you want to create a div with a short paragraph inside. Give the div a class like center, and assign it the margin value auto.

See the Pen align center: center div margin by HubSpot (@hubspot) on CodePen.

Note that margins are different from padding, which 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 differences between these two properties in our post CSS Margin vs. Padding: What's the Difference?

How to Center a Div Vertically

To center a div vertically on a page, you can use the CSS position property, top property, and transform property.

Start by setting the position of your div to absolute so that it’s taken out of the normal document flow. Then set the top property to 50%. This tells the browser to line up the top edge of the div with the center of the page vertically (ie. 50% down the page).

Here’s the problem: having the top edge of the div lined up in the middle of the page won’t center the div. You need to define one last property, the transform property.

While there are several different transformation methods, you want to use the translate() method to move the div along the Y-axis of the page. You’ll want to move the div 50% up from its current position. That will tell the browser to put the center of the div in the vertical center of the page.

Here’s the result:

See the Pen align center: center div vertically by HubSpot (@hubspot) on CodePen.

How to Center a Div Horizontally and Vertically

To center a div both horizontally and vertically on a page, you can follow almost the exact same steps outlined in the section above. You'll use position, top, and transform. The only difference is that you'll also use the left property to center the div horizontally.

Start by setting the div’s position to absolute so that it’s taken out of the normal document flow. Then set the left and top properties both 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).

Finally, set the transform property to translate(-50%, -50%). This moves 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.

See the Pen align center: center div horizontally and vertically in another div by HubSpot (@hubspot) on CodePen.

How to Center a Div Within a Div

There are three ways to center a div inside another div. With each method, you can center the div within a div horizontally, vertically, or both.

Using the Position, Top, Left, and Margin Properties

To horizontally and vertically center a div within a div on a page, you can use the position, top, left, and margin properties, as long as you know the width and height of the divs.

To start, wrap a div element in another div element in your HTML. Give the inner div a class like child and the outer div a class like parent.

In your CSS, use the class selector .parent to set the outer div’s height and width. Then set the position property to relative.

Using the class selector .child, you can now style the inner div. Set its height and width, then set its position to absolute. Now set the top and left properties both to 50%. This tells the browser to line up the left and top edge of the div with the center of the parent container horizontally and vertically.

Finally, set the negative top and left margins to exactly half of the child element's height and width.

See the Pen align center: center div horizontally and vertically in another div by HubSpot (@hubspot) on CodePen.

Using the Position, Top, Left, and Transform Properties

To horizontally and vertically center a div within a div whose height and width is unknown, you can use the transform property instead of the margin property. You'll still use the CSS position, top, and left properties.

Follow the steps above to create the outer and inner divs in HTML. In your CSS, style the outer div in the same way: set the height and width, then set the position to relative.

Now, you'll style the inner div in almost the same way. You can set its position to absolute and the top and left properties to 50%. You won't define the width or height properties though.

You also won't define the margin property. Instead, you'll use the transform property to move the child div 50% to the right and down from the container's edges. This ensures the child div is truly centered in the parent div.

See the Pen align center: center div in another div with flex by HubSpot (@hubspot) on CodePen.

Using Flexbox

You can center a div within a div with CSS 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, first set the height of your document’s HTML and body regions to 100%. You can set the height of the parent container to 100% as well, if you'd like it to take up the whole viewport. For this demo, I'll set the parent container to a specific height instead.

Additionally, you need to define the parent container as a flex container. Do this by setting the display property to flex. Then, set the align-items and justify-content properties to center. This will tell the browser to center the flex item (the div within the div) vertically and horizontally.

See the Pen align center: center div in another div with flex by HubSpot (@hubspot) on CodePen.

Build custom layouts with HTML and CSS.

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, position, and flex properties, for example, will enable you to center virtually any div or block element on a page.

Editor's note: This post was originally published in January 2021 and has been updated for comprehensiveness.