How to center div in css

CSS Center Div

By Priya Pedamkar

Introduction to CSS Center Div

CSS div tag is used to divide the code into different blocks. Using div each block of div tag we can apply in different CSS styles. Now div center means we have to align the div content in the center. It may be an image, plain content, buttons, choice boxes, headers, navigation bars, etc. When we got a situation to align text in the center position, we come up with 2 scenarios, whether the content horizontally center or vertically center.

Therefore, CSS div center can be done in 2 ways

Web development, programming languages, Software testing & others

How to Use Center Div tag in CSS?

We can use center div tag either horizontally or vertically based on our requirements.

1. Horizontally Center

If our requirement is to display heading then we use horizontal center div.

Syntax #1

selector
<
text-align: center;
>

Syntax #2

selector
<
margin-left: auto;
margin-right: auto;
>

2. Vertically Center

If our requirement is a vertical center than we have to use vertical center div.

Syntax #1

selector
<
vertical-align: middle;
>

Syntax #2

Real-time Example: I have booked with some 100 pages, each 10th page is a new chapter then to easily recognize a new chapter we simply keep it in the middle. So this kind of chapter heading scenario we can use div center property.

Examples to Implement CSS Center Div

Below are the examples to implement for the same:

Example #1. Header Div Horizontal Align

Code:

Chapter 1 Horizontal Center Align

CSS div tag is used to divide the code into different blocks. Using div each block of div tag we can apply different CSS styles. Now div center means we have to align the div content in the center. It may be image, plain content, buttons, choice boxes, headers, navigation bars etc. When we got a situation to align text in the center position, we come up with 2 scenarios, whether the content horizontally center or vertically center. Therefore CSS div center can be done in 2 ways
Horizontally center
Vertically center

Chapter 2 Horizontal Center Align

Real time Example:I have book with some 100 pages, each 10th page is new chapter then to easily recognize new chapter we simply keep it in the middle. So this kind of chapter heading scenario we can use div center property.

How to center a div in CSS

In this article, we are going to learn how to center a div in CSS both horizontally and vertically using 15 different methods with examples.

Table Of Contents

Center div Horizontally In CSS

Let’s see how you can align div elements to center horizontally. We have discussed 5 different ways for it, of which margin auto and flexbox is the most commonly used method.

1. Center div Horizontally using margin method

To center a div element horizontally you can simply use the margin property of CSS. It is the easiest way to align a div to the center.

Here is an example in which a child element is aligned to the center using margin property.

Note : To align any element to center horizontally you need to keep 2 things in mind:

2. Center div Horizontally using flexbox

One of the best ways to align the div element to the center horizontally is by using the CSS flexbox.

Using flexbox you can position any element in 2D (horizontal and vertical). Here we will center div horizontally.

First, add display: flex property to the parent of the div element to make it a flex container, then use the justify-content property. Set justify-content: center to center horizontally.

Remember the flex property should be applied to the parent element. Here is the example code.

3. Center div Horizontally Using Position absolute and margin auto

An element having an absolute position is like a floating element in the parent element. You can move it wherever you want within the document.

4. Center div horizontally using position absolute and translateX

Using position property and translateX you can align the element horizontally as well as vertically to center. Here we will see horizontal alignment.

Now, shift the child element 50% to its left.

This left shift of 50% will make the child element start from midway to the right side of the parent element.

You can see in the above picture we want to center the box horizontally but it starts from the middle of the parent element. So we can apply the translateX property and move the child element 50% in a negative direction which will align it in the center. Now add transform: translateX(-50%) to finally center the child element.

5. Center div Horizontally using table

Using a table to design a page layout is not used nowadays, but it’s worth it to know that you can use this to center the element horizontally.

To center an element horizontally in the table use text-align: center to parent and display: inline-block to the child element.

To see the code in effect width of the child should be less than the parent element so we have set the parent width to 100vw for understanding purposes.

Here is HTML and CSS code as an example.

6. Center div Horizontally Using Display table-cell

CSS enables us to change ordinary elements into the effect of table elements. Using this feature and concept used in the above approach you can center the element horizontally.

Set display: table-cell and text-align: center to the parent element and display: inline-block to the child element.

2. Center div Vertically In CSS

Now we will see how to center a div vertically in CSS. For most cases you can refer above methods of horizontal alignment and add a few more properties to center it vertically also, but anyway we will discuss it in detail.

1. Center div Vertically Using flexbox

Using flexbox you can align elements both in the horizontal and vertical direction. Here we will align the div in the vertical direction.

First, you need to define display: flex to the parent element. Now the element inside this parent element becomes flex items.

2. Center div Vertically Using Absolute position and margin auto

We already know the element having an absolute position is can be moved very easily within the webpage. Using this we can also align to the center.

3. Center div Vertically Using position absolute and translateY

In the same way, you centered the element horizontally using position absolute and translateX, you can use translateY to center the element vertically.

This will flow the child element to start from the verticle middle of the parent element, which is not the center but you can use transform: translateY(-50%) to shift it up by 50% which will make it verticle align to the center.

4. Center div Vertically Using the table

As we have discussed above you can also use the table to create a layout and center element (not recommended).

To center an element vertically in the table use vertical-align: middle to parent and display: inline-block to the child element.

To see the code in effect height of the child should be less than the height parent element so we have set the parent height to 200px for understanding purposes.

5. Center div Vertically Using Display table-cell

Using CSS and change the element’s behaviors to the table you can use the above method without using table elements.

Set display: table-cell and text-align: center to the parent element and display: inline-block to the child element.

Conclusion

In this short guide, you learned how to center a div in CSS. You can use the above methods to center elements vertically or horizontally. You can also use the table method to center elements vertically or horizontally.

The best way to center elements both horizontally and vertically is to use a flexbox.

If you want to center elements vertically or horizontally using table elements, you can use the above methods or use display: table-cell and text-align: center to the parent element and display: inline-block to the child element.

report this ad

Center Div Different Ways to Center a Div in a Webpage

One of the most common things you might be doing as a web developer is to centre a div on a webpage. So, in this small post, I’m going to discuss 3 different ways to centre a div on a webpage.

Disclaimer: Some of these methods are not optimal, it is just like a test how far my creative mind can go.

For each and every solution here this will be our starter code. We will be starting with a hypothetical card which welcomes to a blog. (I have used the br tags to just decease a few lines of CSS)

Exit fullscreen mode

Exit fullscreen mode

The CSS written here is simply resetting the margin and padding for all elements. Setting the box-sizing to «border-box» makes it easier to deal with CSS as it includes all the margins and padding of an element within its width. After that, I set the div with class card-holder to take full available width and height of the viewport. This will be helpful; for positioning the inner div. Finally, there are some styles applied to the card giving it a background and some padding, then I specified width and max-width so that it doesn’t look that big in big screens. Then I have aligned all the text to the center, and given them a font family of Arial.

After all this adjustment, our card will look somewhat like this.

The result we are trying to achieve:

1. The Flexbox way:

I generally use the flexbox way to centre a div on a webpage. For this, we need to modify the CSS of the outer div(i.e. the card-holder) to display it as flex and then we need to justify-content and align-items to be in the «center». So the code changes for that:

Exit fullscreen mode

After these changes, the card will be centred.

2. Absolute positioning:

For this, we need to position of the parent element to be relative. Setting this would let us position the child element as absolute. Then we can shift the child element by 50% from top and 50% from left. So, at this stage, the CSS will look like:

Exit fullscreen mode

But, after all this, the div won’t be centred. It will look like:

If you look minutely, you will notice that the top left corner of our card is centred in the page. So, we need to move the card now. One of the easiest ways to move the card irrespective of its size is to use the transform CSS property. Now, there are many things we can set with this CSS transform property, one of which is translate, which moves this element without changing other elements surrounding it. One of the best thing about this transform translate is that it can receive percentage values and these percentages are calculated according to the width and the height of the element on which we are applying this style.

Exit fullscreen mode

3. Using Grid Template and Positioning:

When CSS grids and flexboxes came, they were a game-changer. They were introduced to save web developers from the hassles of using the «then-popular» floats and clearing floats. Using grid one can create almost any layout.

So our concept will be to declare a 3X3 grid and place our card in the middle grid. For that, we need to make the card-holder display as a grid and then we need to template that grid with three rows and 3 columns. For that the CSS required will be like:

Exit fullscreen mode

Now after doing this, you might not see any changes other than the change of height and width of the card. But if you use the dev tools you will be able to see the grid created like this:

Now, we need to get our card to the center grid. For that, we can use grid-row and grid-column properties to select between which grid lines should our grid item stay. The grid-line numbers look somewhat like this:

So, if you have a proper look at the line numbers then you will instantly notice that we need to place our card at grid line number 1 to 2 in the column and as well as in the row. So, that code will look like:

Exit fullscreen mode

Now, at this point, you will see that this div is not properly centered. For that, we can use: margin: 0 auto; to center the card. But still, after that, the content inside the card won’t be vertically aligned.

For this, we need to change the HTML to have the content of the card in another div. Then we need to divide our card into 3 columns and place the div inside the card in the middle column. So the HTML and CSS changes look like:

Exit fullscreen mode

Exit fullscreen mode

To achieve this I used this piece of code:

Exit fullscreen mode

Some more tinkering might be needed for squarer devices. So this method is not all reliable.

Honorable mention 1: The very first approach I tried

In this approach, I just thought to set the margin of the card to «auto» thinking that setting the margin auto on horizontal centres it, then it will do the same for vertical margin. But alas, the case was not like that. Setting vertical margin to 0 defaults them to 0

Honorable mention 2: If you are just centering a text and you need nothing else

In this case, our HTML looks somewhat like this:

Exit fullscreen mode

And our initial CSS for card-holder and the h1 looks like:

Exit fullscreen mode

This will look like this:

Now we can change this with just two lines of CSS in h1:

Exit fullscreen mode

This will look like:

Final Verdict

This was just a fun post just testing my CSS skills. If it was a practical project I would have used method 1 for centering the div. If you know any other methods please comment down below and let me know.

Learn how to center an element vertically and horizontally with CSS.

I am vertically and horizontally centered.

How To Center Anything Vertically

Example

I am vertically centered.

How To Center Vertically AND Horizontally

Example

I am vertically and horizontally centered.

You can also use flexbox to center things:

Example

Tip: Go to our CSS Align Tutorial to learn more about aligning elements.

Tip: Go to our CSS Transform Tutorial to learn more about how to scale elements.

Tip: Go to our CSS Flexbox Tutorial to learn more flexbox.

We just launched
W3Schools videos

COLOR PICKER

Get certified
by completing
a course today!

CODE GAME

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Courses

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

How to Center a DIV Block Using CSS

Standard Trick to Centering a Block of Text/Images Using Cascading Style Sheets

How to Centre a DIV Block Using CSS

This article shows you how to centre (or «center» if you use a different variant of English) a DIV block, whether it contains text, graphics, or a mixture of both, using standards-compliant Cascading Style Sheets (CSS). The technique is useful not just for creating pleasing designs, but also for times when you want to create a fixed width single column layout with the main content placed in the centre of the page, and not flushed to one side.

Assumptions

I will assume in this article that you have some basic knowledge of how to write HTML and CSS, and at the very least, know how to insert CSS code.

If you don’t even have a website yet, and have arrived at this article looking for tips on designing one, please start with my article on How to Start/Create Your Own Website instead.

Steps to Centering a DIV Block without Centering the Text Inside

Let’s assume that you have a div block as follows:

At first glance, you may think that the following CSS rule will work.

However, the rule centres the text inside the box, rather than the block itself. While there are times when you may want to do this, our intention here is to centre the entire block but leave the internal contents formatted as it was before. As such, the above code is not what we want.

Instead, the standard trick for centring («centering») a block in CSS is to do the following:

Both steps are necessary. You cannot just set the margins to auto without specifying the width of the block and expect this method to work.

For example, if you want your div block to have a width of 700 pixels, the following code will centre the block.

Incidentally, the width doesn’t need to be in pixels. Other units like em or percentage will work just as well.

At the time this article was written, you can see an example of this code in action on the Fixed Width Layout Demo Page. The main body of that page has a width of 730 pixels, and is centred using the method given here, so that it appears in the middle of the browser window.

(Note: if your browser window is opened too small, or your monitor has too low a resolution, you will of course not be able to see the effect.)

Browser Support

The code above has been tested with IE 6 to 11, Firefox, Chrome, Vivaldi, Opera and Safari. It should work in all later browsers as well, since the newer ones tend to be standards-compliant.

Note that this article only deals with the centring of a DIV block using CSS. If you want to centre a table, and need to work around bugs in IE 6 and 7, please see my article How to Centre a Table Using CSS instead. Although that article is directed at Nvu and KompoZer users, the code itself is given in CSS and HTML so you should have no trouble following what is said. And if you want to do the same with an image, please see How to Centre an Image with CSS.

Conclusion

Copyright © 2008-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Other articles on: CSS, HTML

thesitewizard™ News Feed (RSS Site Feed)

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.