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 and styling elements on the page. Do you want the elements to overlap or have space between them? Do you want the layout to be responsive? Do you want some text on the page to be centered and the rest left-aligned? These are just a few questions you’ll have to address as you code.

Download Now: Free Intro Guide to HTML & CSS

Thankfully, divs can help. Divs — short for content division elements — are HTML elements that can divide your web page into sections so you can target them with unique CSS properties. For example, say you want to include a caption below an image in a blog post. The body text is left-aligned, black, and 18px, but you want the text in the caption to be centered horizontally, gray, and 14px so that it’s not competing as much for the visitor’s attention. In that case, you could 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 can help 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.

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

How to Center Text in Div in CSS

Using 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 last 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. 

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

Featured Resouce

The Beginner's Guide to HTML and CSS

Fill out the form to learn more about CSS.

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 and defining it with the value “center.”

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 border and text-align properties. 

Here's the CSS:

 
.center {
border: 5px solid #FFFF00;
text-align: center;
}

Here's the HTML:

 
<div class="center">
<p>The text within the div is centered horizontally.</p>
</div>

Here's the result:

Text in a div is centered horizontally using the text-align property in CSS-1

Image Source

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 within the div. Instead, you have to use the justify-content property and define it with the value "center."

Let's create the same div element with a yellow border around it as above. In your HTML, you’d give the div the class name “center" and use the same class selector to style it with CSS. You can start by defining the border property as you did above. Then, define the display property as "flex" to make the div a flex container and define the justify-content property as "center."

Here's the CSS:

 
.center {
border: 5px solid #FFFF00;
display: flex;
justify-content: center;
}

Here's the HTML:

 
<div class="center">
<p>The text within the div is centered horizontally.</p>
</div>

Here's the result:

Text in a flex container is centered horizontally using the justify-content property in CSS-1

Image Source

How to Center Text in Div Vertically

There are three ways to center text in a div vertically. They're slightly more complicated than the methods for centering text in a div horizontally.

Let's take a look at examples of each method below. 

Using the Padding Property

In most cases, you can center text vertically in a div using the padding property. While you can use the longhand form, using the shorthand padding property is easier because you only have to set 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. 

Here's the CSS:

 
.center {
border: 5px solid #FFFF00;
padding: 50px 0;
}

Here's the HTML:

 
<div class="center">
<p>The text within the div is centered vertically.</p>
</div>

Here's the result:

Text in a div is centered vertically using the padding property in CSS

Image Source

Using the Line-Height Property

In most cases, you can also center text vertically in a div by setting the line-height property with a value that is equal to the container element’s height.

Let's create the same div element with a yellow border around it as above. In your HTML, you’d simply add some text inside the div and give it the class name “center." Do not add paragraph tags around the text since that will off-center the text. Now use the class selector .center to style it with CSS. You can start by defining the border property as you did above. Now set the height and line-height properties with the same value.

Here's the CSS:

 
.center {
border: 5px solid #FFFF00;
line-height: 150px;
height: 150px;
}

Here's the HTML:

 
<div class="center">This single line of text is centered vertically.
</div>

Here's the result:

A single line of text in a div is centered vertically using the line-height property in CSS

Image Source

That method will only work for a single line of text. If you have multiple lines of text within a div, then you'll have to define a few more properties.

Once you complete the steps above, you'll start a new rule set with the CSS selector .center p to style the paragraph within the div. First, you want to define the display property as "inline-block" so the paragraph flows naturally inside the div.  Then set the line-height property to "normal" and the vertical-align property to "middle." This will ensure that the text inside the div is centered vertically, whether it's one line of text or multiple lines.

Here's the CSS:

 
.center {
border: 5px solid #FFFF00;
line-height: 150px;
height: 150px;
}
.center p {
display: inline-block;
line-height: normal;
vertical-align: middle;
}

Here's the HTML:

 
<div class="center">
<p>The text within the div is centered vertically. The text within the div is centered vertically. The text within the div is centered vertically.</p>
</div>

Here's the result:

Multiple lines of text in a div is centered vertically using the line-height property in CSS

Image Source

Using the Align-Items Property

Again, 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 and define it with the value "center."

Let's create the same div element as above, giving it the class name .center and defining the border property in CSS. Then, define the display property as "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, define the align-items property as "center."

Here's the CSS:

 
.center {
border: 5px solid #FFFF00;
display: flex;
height: 150px;
align-items: center;
}

Here's the HTML:

 
<div class="center">
<p>The text within the div is centered vertically.</p>
</div>

Here's the result:

Text in a flex container is centered vertically using the align-items property in CSS-1

Image Source

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 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 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. Let's say you want to create a div element with a short paragraph inside and a yellow border around it, like the examples above. In your HTML, you’d give the div a class name like “center.” You can then use the class 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 differences between these two properties in CSS Margin vs. Padding: What's the Difference?

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 using the margin property in CSS-1

Image Source

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 the 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 will make the div look off-center. Here’s an example.

A div with its top edge vertically centered on the page in W3Schoolss 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 Y-axis. Specifically, you 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.

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

Here’s the CSS:

 
.center {
position: absolute;
top: 50%;
transform: translate(0, -50%);
border: 5px solid #FFFF00;
padding: 10px;
}

Here’s the HTML:

 
<div class="center">
<p>This div is vertically centered.</p>
</div>

Here’s the result:

A div is vertically centered on the page using the position, top, and transform properties in CSS-1

Image Source

How to Center a Div Horizontally and Vertically

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

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). If you stop there, you'll run into the same problem as before: having the edges of the div lined up in the middle of the page will make the div look off-center. Take a look at the example below.

A div with its top and left edge vertically centered on the page in W3Schoolss Tryit Editor-1

Image Source

To truly center the div horizontally and vertically, you need to define the transform property. 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.

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>The edges of this div are vertically and horizontally centered, making it look off center.</p>
</div>

Here’s the result:

A div is horizontally and vertically centered on the page using the position, top, left, and transform properties in CSS

Image Source

How to Center a Div Within a Div

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

In the examples of the methods below, we'll go over how to horizontally and vertically center a div within a div. 

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 — if 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 name like "child" and the outer div a class name like "parent."

Then in your CSS, use the class selector .parent to style the outer div. Set its height, width, and background color. The color will help you more clearly see how the inner div is centered. Then set the position property to "relative."

Now using the class selector .child, you can style the inner div. Set its height, width, and background color as well. Then set the position property to "absolute." Now set the top and left properties to 50%, respectively. Remember 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.

If you stop there, you'll run into the same problem as before: having the edges of the div lined up in the middle of the parent container will make the child div look off-center. To truly center the child div, you can set negative top and left margins. Each value should be exactly half the child element's height and width.

Here's the CSS:

 
.parent {
background: #CCCCCC;
height: 200px;
width: 200px;
position: relative;
}
.child {
background: #FFFF00;
width: 70px;
height: 70px;
position: absolute;
top: 50%;
left: 50%;
margin: -35px 0 0 -35px;
}

Here's the HTML:

 
<div class="parent">
<div class="child">This div is centered vertically.</div>
</div>

Here's the result:

A div centered within a div horiztonally and vertically using the Position, Top, Left, and Margin Properties in CSS

Image Source

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, width, background color, and position to "relative."

Now, you'll style the inner div in almost the same way. You can set the background, 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 define the transform property to move the child div 50% to the right and down from the container's edges.  This will ensure the child div is truly centered in the parent container.

Here's the CSS:

 
.parent {
background: #CCCCCC;
height: 200px;
width: 200px;
position: relative;
}
.child {
background: #FFFF00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Here's the HTML:

 
<div class="parent">
<div class="child">This div is centered vertically and horizontally.</div>
</div>

Here's the result:

A div centered within a div horiztonally and vertically using the Position, Top, Left, and Transform Properties in CSS

Image Source

Using Flexbox

You can center a div within a div 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 and body 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 even if it was resized. 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. 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. We'll also add a background color to the parent container so you can more clearly see how the child div element is centered horizontally and vertically.

Here’s the CSS:

 
html,
body { height: 100%;
}
.parent {
height: 200px;
background: #CCCCCC;
display: flex;
align-items: center;
justify-content: center;
}
.child {
background-color: #FFFF00;
width: 100px;
height: 100px;
}

Here’s the HTML:

 
<div class="parent">
<div class="child"></div>
</div>

Here’s the result:

A div centered within a div using Flexbox in W3Schoolss 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 Jan 28, 2021 7:00:00 AM, updated October 08 2021

Topics:

Bootstrap & CSS