Solution 1 :

One way to center a div is to set the width of the element and then use the margin property to set the left and right margins to auto. This will horizontally center the element within its container.

For example:

.element {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

You can also by using the text-align property.

 .shape {
        text-align: center;
    }

Also by using the margin property.

For example:

.shape {
    margin: 0 auto;
}

Finally, you can center a div when it comes to shapes by using the transform property.

For example:

.shape {
    transform: translate(50%, 50%);
}

Solution 2 :

Centering a div can be easy or hard based on your layout options and what you want to achieve.

The simplest way to horizontally center a div, add a width and margin: 0 auto.

Simplest way to horizontally and vertically center a div is using a flexbox, display: flex; justify-content:center; align-items:center. Also you can go with display:table and display:table-cell.

Last option is to use Positioning. You can take a div, style it with position:relative and add a height:300px,width:300px. Then inside the parent div, add a child div and style it with position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:50px; width:50px

Problem :

newbie here starting with the basics of HTML and CSS. I really have a hard time centering a simple div (a square in my example). I’ve watched many tutorials as well as read many articles but still cannot really figure out the “best” way to do it. With so many different ways like align-items, align-content, justify-items, justify-content, I get overwhelmed at some point especially with how these behave with different displays (flex, grid, inline-block etc), not to mention the positions of parents and childs. Below is an example that I still can’t quite easily manipulate/center. The HTML is only the boilerplate and a blank div with class square inside the body. Thank you all in advance for your tips!

html {
  height: 100%;
}
body {
  min-height: 100%;
  background-color: #162944;
}
.square {
  height: 10rem;
  width: 10rem;
  background-color: salmon;
  display: flex;
  align-items:center;
  justify-items: center;
  align-content: center;
  justify-content:center;
  place-content: center;
  place-items: center;

}

The above example has been tried with all possible combinations and NOT only as you see it. Also with display:grid; and others. Is there really not a simple way to center an object on your page?

Comments

Comment posted by Vik-Pol

Really appreciate your feedback @Goal Moal! I believe that I was not specific in my post though and apologise for that. I would like to center the div both vertically and horizontally. None of the above could center my div in the middle of my page :/ The

Comment posted by Goal Moal

Tell me if this does the trick { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } Sorry I can’t test it, I’m not on my laptop

Comment posted by Goal Moal

And if I got you right, I think you don’t need the display value, You need to set the width of the div? but for justifying and aligning I think you do.

Comment posted by Vik-Pol

Yep, the { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } did the trick! Thanks so much 🙂

Comment posted by Goal Moal

I didn’t realise that someone gave the same answer, Sorry hahaha <3

Comment posted by Vik-Pol

Thank you @Kevin, that was really useful. I am totally starting to realise what you say (being easy and difficult at the same time). I found that using

By