Whether you're building a site from scratch or with the assistance of a website builder, it's essential to have a basic understanding of HTML and CSS to customize your page layouts. Once you have that basic knowledge, you can dive deeper into styling elements, such as learning how to center div vertically and horizontally.
![Download Now: 50 Code Templates [Free Snippets]](png/cace6948-d859-40c5-ad73-a401be3aa84e.png)
The good news: I'm here to help you discover multiple methods for centering elements in CSS. I'll walk you through the following concepts, and by the time you're done reading, you'll be up-to-speed with learning how to center div vertically and horizontally, and beyond. Let's dive in.
What is a div and why center a div?
One thing many beginner programmers struggle with when building a layout is how they'll arrange and style elements on the page. You have to ask yourself: 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? That's a lot of questions. Luckily, divs can help.
A div — short for content division elements — is a generic block-level HTML element. As the name implies, divs can divide your web pages into more digestible sections. By doing so, you can target them with CSS.
I'll give you an example. Say you want to include a block quote in your blog post, and you'd like to center it instead of leaving it left-aligned like the rest of your body text.
In this scenario, I recommend you wrap the text in a div element. Then, apply CSS to that one element. This ensures the rest of your page stays consistent — it only applies styling to the element you've identified. Pretty cool, right?
Understanding how to center divs and text in divs, in particular, is a valuable skill for beginners. By learning this, you can prevent your content from stretching out to the edges and overlapping with other elements. This, as you've probably experienced firsthand, can lead to issues.
Have I convinced you that figuring out how to center a div — or text in a div — is an essential skill for beginner programmers to master? I thought so. Now, I'll walk you through how to do it.
50 Free Coding Templates
Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.
- Navigation Menus & Breadcrumbs Templates
- Button Transition Templates
- CSS Effects Templates
- And more!
How to Center a Div in CSS
There are a few ways to center a div in CSS. And yes, it's possible to center div vertically and horizontally — though doing so vertically is a bit trickier.
I'll walk you through both of these methods below. Then, I'll share how you can center div vertically and horizontally — or even center a div within another div. (Spoiler: It's not as overwhelming as it sounds.)
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 brief paragraph inside of it. Here, I'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.
Output of Centering a Div Horizontally
See the Pen align center: center div margin by HubSpot (@hubspot) on CodePen.
Did you notice that the margins are different from padding? I'd use padding to create space between the div's border and the paragraph inside of the div, which, in this case, is the inline element. If you want to learn more about the differences between these two properties, I encourage you to explore this post: CSS Margin vs. Padding: What's the Difference?
Featured Resource: Intro Guide to CSS & HTML
How to Center a Div Vertically
You did a great job learning how to center a div horizontally. Now, I'll show you how to do so vertically. It's a bit more difficult, but not impossible.
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%).
I 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. I need to define one last property, the transform property.
While there are several different transformation methods, I want to use the translate() method to move the div along the Y-axis of the page. I 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.
Output of Centering a Div Vertically
See the Pen align center: center div vertically by HubSpot (@hubspot) on CodePen.
How to Center a Div Horizontally and Vertically
Sometimes, centering a div horizontally or vertically isn't enough, and you'll need to do both. To achieve this, I'll show you that 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.
50 Free Coding Templates
Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.
- Navigation Menus & Breadcrumbs Templates
- Button Transition Templates
- CSS Effects Templates
- And more!
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.
Output of Centering a Div Horizontally and Vertically
See the Pen align center: center div vertically and horizontally by HubSpot (@hubspot) on CodePen.
How to Center a Div Within a Div
If you need to center a div within a div, you can do so three ways. 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. However, to do so, you'll need to 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.
Output of Centering a Div Within a Div
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.
50 Free Coding Templates
Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.
- Navigation Menus & Breadcrumbs Templates
- Button Transition Templates
- CSS Effects Templates
- And more!
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.
Output of Using the Position, Top, Left, and Transform Properties
See the Pen align center: center div in another div without defined width by HubSpot (@hubspot) on CodePen.
Using Flexbox
Another strategy I use to center a div within a div is CSS Flexbox. Flexbox is an excellent method as it's responsive and doesn't require margin calculations. However, there are a few additional steps to consider. I'll share those with you now. To center a div horizontally and vertically with Flexbox, here's what you need to do.
-
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.
Output of Using Flexbox to Center a Div Within a Div
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
Say I want to center text in a div in CSS. I can achieve this a few 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.
I'll walk you through each of these methods below.
How to Center Text in Div Horizontally
There are two ways to center text in a div horizontally. Here are two examples.
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.
Output of Center Text in a Div Using 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 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.
I'll show you how to 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.
Output of Center Text in a Div Using Justify-Content Property
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. I'll walk you through the different methods now.
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.
Follow along with me as I 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.
Output of Centering Text in a Div Vertically Using Padding Property
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.
Output of Centering Text in a Div Vertically Using Line-Height Property
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.
Output of Centering Text in a Div Vertically Using Align-Items Property
See the Pen align center: vertical align text flex by HubSpot (@hubspot) on CodePen.
Build custom layouts with HTML and CSS.
There you have it: Everything you need to know about how to center div vertically and horizontally, or beyond.
As you can see, a bit of coding knowledge enables 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.
![How to Import Bootstrap in React [The Beginner's Guide]](jpg/import-bootstrap-in-react.jpg)
![How to Create Scrolling Text With CSS [+ Code Examples]](jpg/scrolling%20text%20css.jpg)
