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.
![Download Now: 25 HTML & CSS Hacks [Free Guide]](https://no-cache.hubspot.com/cta/default/53/848be230-f06a-420e-9a24-82b45fe61632.png)
In this post, we’ll cover multiple methods for centering elements in CSS, including:
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.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
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:
- Give the div a CSS class like center.
- In your CSS code, type your .center CSS selector and open the style brackets.
- Set the width of the element by either percentage or pixels, ie width: 50%; or width: 500px.
- Set 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. Here, we've given the div the class center, and assigned the margin value auto.
Try It Yourself
The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
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?
Featured Resource: Intro Guide to CSS & HTML
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. Here's how:
- Give the div a CSS class like center.
- In your CSS code, type your .center CSS selector and open the style brackets.
- Set the position of your div to absolute so that it’s taken out of the normal document flow.
- 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).
- Then, set the transform property to translate(0, -50%).
We might've been able to skip the last step, but 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.
Try It Yourself
The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
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.
Here's how:
- Give the div a CSS class like center.
- In your CSS code, type your .center CSS selector and open the style brackets.
- Set the position of your div to absolute so that it’s taken out of the normal document flow.
- 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).
- 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.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
Try It Yourself
The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
See the Pen align center: center div vertically and horizontally 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.
Here's how:
- 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 code, open the curly brackets for the class selector .parent.
- Set the outer div’s height and width (i.e. 300px and 300px), then set the position property to relative.
- You can now style the inner div. Open the curly brackets for the class selector .child.
- Set the inner div's height and width (i.e 100px and 100px), 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 margin property to -50px 0 0 -50px, so that the negative top and left margins are exactly half of the child element's height and width (in this case, -50px and -50px, respectively. This number will vary).
Try It Yourself
The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
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.
Here's how:
- 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 code, open the curly brackets for the class selector .parent.
- Set the outer div’s height and width (i.e. 300px and 300px).
- Set the position property to relative.
- You can now style the inner div. Open the curly brackets for the class selector .child.
- Set its position to absolute.
- Now set the top and left properties to 50%.
- Set the transform property to translate(-50%,-50%).
With this method, you won't need to define the width or height properties. You also won't define the margin property. Instead, the transform property will push the div right and down from the container's edges. This ensures the child div is truly centered in the parent div.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
Try It Yourself
The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
See the Pen align center: center div in another div without defined width 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:
- In your CSS code, find your html and body selectors. Inside the curly brackets, set the height of both properties to 100%. (Note: 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.)
- 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 code, open the curly brackets for the class selector .parent.
- Set the outer div’s height (i.e. 200px).
- Set the display property to flex. This will define the parent container as a flex container.
- Set the align-items and the justify-content properties to center. This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
- We're technically done, but let's still style the inner div. Open the curly brackets for the class selector .child.
- Set the inner div's height and width (i.e 100px and 100px).
Try It Yourself
The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
See the Pen align center: center div in another div with flex by HubSpot (@hubspot) on CodePen.
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
Say you want to create a div with a short paragraph inside it. In most cases, you can center text horizontally in a div using the text-align property with the value center. Here's how:
- Give the div a CSS class like center.
- In your CSS code, type your .center CSS selector and open the style brackets.
- Set the text-align property to center.
Try It Yourself
The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
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. Take these steps:
- Give the div a CSS class like center.
- In your CSS code, type your .center CSS selector and open the style brackets.
- Set the display property to flex to make the div a flex container.
- Set the justify-content property to center.
Try It Yourself
The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
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.
Let's break this down:
- Give the div a CSS class like center.
- In your CSS code, type your .center CSS selector and open the style brackets.
- Set the padding property to 50px 0.
Since you want to center the text vertically, the first value, which stands for the top and bottom padding, can be any positive length or percentage value. The second value, which stands for the right and left padding, should be 0.
Try It Yourself
The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
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 the 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.
Here's how:
- Give the div a CSS class like center.
- In your CSS code, type your .center CSS selector and open the style brackets.
- Define the height and line-height properties of your div to the same size (we use 150px in the example below).
- Find or create your p CSS selector.
- To center a paragraph with multiple lines, set the display property to inline-block.
- Then, set line-height to normal and set vertical-align to middle.
This last step ensures that the text inside the div is centered vertically, whether it's one line or multiple lines of text.
Try It Yourself
The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
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.
Here's how:
- Give the div a CSS class like center.
- In your CSS code, type your .center CSS selector and open the style brackets.
- 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 (we use 150px for the example below). 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.
Try It Yourself
The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
See the Pen align center: vertical align text 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.
