Different Ways to Center a Div in a Webpage (2023)

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)

<div class="card-holder"> <div class="card"> <h1>Hello There👋</h1> <br> <p>Welcome to my blog</p> <br> <button>Get Started!</button> </div><div>

*{ margin: 0; padding: 0; box-sizing: border-box; }.card-holder{ width: 100vw; min-height: 100vh;}.card{ background: #45CE30; padding: 20px; width: 80%; max-width: 500px; text-align: center; font-family: Arial;}

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.

Different Ways to Center a Div in a Webpage (1)

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:

(Video) HTML & CSS for Beginners Part 20: How to center a div

.card-holder{ /* other base styles go here */ display: flex; justify-content: center; align-items: center;}

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:

.card-holder{ /* other base styles go here */ position: relative;}.card{ /* other base style */ position: absolute; top: 50%; left: 50%;}

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

Different Ways to Center a Div in a Webpage (2)

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.

So, setting the transform translateX and translateY to -50% each will make the card to move to left and up making its centre to come to the position where its top left corner was before. So that line of code looks like:

.card{ /* other base style */ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}

(Video) 5 ways to vertically center with CSS

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:

.card-holder{ /* other base styles go here */ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);}

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:

Different Ways to Center a Div in a Webpage (3)

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:

Different Ways to Center a Div in a Webpage (4)

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:

.card{ /* other base style */ grid-row: 2/3; grid-column: 2/3;}

Different Ways to Center a Div in a Webpage (5)

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.

(Video) Top 3 Ways to Center a DIV with CSS

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:

<body> <div class="card-holder"> <div class="card"> <div> <h1>Hello There👋</h1> <br> <p>Welcome to my blog</p> <br> <button>Get Started!</button> </div> </div> <div></body>

 .card{ /* other default style */ grid-row: 2/3; grid-column: 2/3; margin: 0 auto; display: grid; grid-template-rows: 1fr 6fr 1fr; } .card div{ grid-row: 2/3; }

Different Ways to Center a Div in a Webpage (6)

Now this method, will need some tinkering for smaller screen sizes, which can be done easily with media query and setting the grid-template-columns in .card-holder to be something like "1fr 5fr 1fr". In my case Setting it like this made it look like this on mobile devices:

Different Ways to Center a Div in a Webpage (7)

To achieve this I used this piece of code:

 @media (max-width: 768px){ .card-holder{ grid-template-columns: 1fr 6fr 1fr; } .card{ padding: 20px; } }

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

(Video) 12 ways to center a div

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:

<body> <div class="card-holder"> <h1>Hello World!</h1> <div></body>

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

 .card-holder{ width: 100vw; min-height: 100vh; } h1{ font-size: 4rem; font-family: Arial, Helvetica, sans-serif; }

This will look like this:

Different Ways to Center a Div in a Webpage (8)

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

h1{ font-size: 4rem; font-family: Arial, Helvetica, sans-serif; text-align: center; line-height: 100vh;}

(Video) 3 Ways to center a DIV in CSS 🔥 #ytshorts #designwithrehana

This will look like:

Different Ways to Center a Div in a Webpage (9)

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.

FAQs

Different Ways to Center a Div in a Webpage? ›

To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.

What are the different ways of centering a div? ›

How to Center a Div in CSS
  • 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.
May 15, 2023

How do I center a div in the middle of the page horizontally? ›

To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.

How do you center a div without absolute position? ›

To position your element centered vertically we actually make two movements.
  1. Move the element down half (or 50%) of the parent's height.
  2. Move the element back up half (or -50%) of it's own height.
Jul 28, 2014

How many ways are there to center a div in CSS? ›

Those methods were:
  • Using position: relative, absolute and top, left offset values.
  • Using position: relative and absolute, top, left, right and bottom offset values and margin: auto.
  • Using flexbox, justify-content and align-item.
  • Using flexbox, justify-content and align-self.
  • Using flexbox and margin: auto.
Jul 20, 2022

How do you center horizontally and vertically inside a div? ›

Set the child element's top and left properties to 50%. This positions the child element at the center of the parent container. Use transform: translate(-50%, -50%) to center the child element both horizontally and vertically.

How do I center a div with Flex? ›

How to center a <div> using Flexbox property of CSS ?
  1. We use the property of display set to flex i.e. display: flex;
  2. Align items to center using align-items: center;
  3. The last step is to set justify-content to center i.e. justify-content: center;
Jun 25, 2021

How do I center align in HTML? ›

The text in an HTML document can be horizontally centred by using the <centre> HTML tag. Since HTML5 did away with this tag, it is advised that you format the document's text horizontally instead by using the CSS text-align property. The <centre> element is another name for this tag.

How do I center a div margin in HTML? ›

The trick to centering a div in its parent element is to set the left and right margins to "auto". Your method works mathematically (although you are missing the margin-left value which will cause a syntax error), however "auto" is preferred because it handles the math for you.

How do I center a div without Flexbox? ›

CSS
  1. .container {
  2. height: 100vh;
  3. }
  4. .div-to-center {
  5. max-width: 250px;
  6. /* Centers horizontally */

How do I center a div in a div horizontally? ›

To Horizontally centered the <div> element:
  1. We can use the property of margin set to auto i.e margin: auto;.
  2. The <div> element takes up its specified width and divides equally the remaining space by the left and right margins.
Nov 8, 2021

How do I align everything in a div horizontally? ›

To align a div , we can use the margin property. If we set margin: auto , we get equal margins on both left and right sides, which eventually centers the element horizontally. The child div will be centered horizontally and not vertically.

How do you force align a div to center? ›

All you need to do is add the properties display: flex , justify-content: center to the parent div for horizontal justification and align-items: center for vertical alignment. With these simple additions, your div will be perfectly centered.

How do I align a div in center with position fixed? ›

If your div has a known width and height, then you basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

How do I center a vertically fixed div? ›

Add CSS
  1. Set the top and left properties to 50% to center the left-top corner of the <div>.
  2. Set the margin-top and margin-left properties to the negative half of the height and width of the <div>.

What are two methods for centering text? ›

We can use the following two methods to center a text in HTML:
  • The <center></center> tag.
  • The CSS text-align:center property.

How do I center a div in a div? ›

Set the margin property to "auto" to horizontally center the <div> element within the page. The "margin: 0 auto" does the actual centering.

How do I center two divs horizontally? ›

How to horizontally center Multiple Divs in a Div using CSS?
  1. Set text-align attribute for outer div as center.
  2. Make sure the inner divs are inline blocks.

How do I center a div with a float right? ›

CSS div float center

You can set float div center by using margin property. you does not need to use float property but you can use margin property and set left or right margin value auto by this way.

Videos

1. How to Center in CSS - EASY ( Center Div and Text Vertically and Horizontally )
(garnatti one)
2. 4 Quick and Easy Ways to Center a Div with HTML and CSS
(Bree Hall | Bytes of Bree)
3. 3 Different ways to center a div in a webpage
(AyushmanBT)
4. CSS Flex: how to center items vertically and horizontally
(Ghost Together)
5. 3 Ways to Center a div in 58.07 seconds #shorts
(TomDoesTech)
6. How to center a div using position absolute
(Alamin)
Top Articles
Latest Posts
Article information

Author: Melvina Ondricka

Last Updated: 02/09/2023

Views: 6310

Rating: 4.8 / 5 (48 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Melvina Ondricka

Birthday: 2000-12-23

Address: Suite 382 139 Shaniqua Locks, Paulaborough, UT 90498

Phone: +636383657021

Job: Dynamic Government Specialist

Hobby: Kite flying, Watching movies, Knitting, Model building, Reading, Wood carving, Paintball

Introduction: My name is Melvina Ondricka, I am a helpful, fancy, friendly, innocent, outstanding, courageous, thoughtful person who loves writing and wants to share my knowledge and understanding with you.