Ways to center CSS element

1. Most common one, Use parent and child div as well as text-align: center

first, enclose the div you want to center with a parent element(wrapper or containner) second, set the text-align: center to the parent element.

  • third, set the target div to display: inline-block.

By default, the div dispaly property is block, which will span the div to the whole
width of the page. By setting the display to inline-block, it ensure the div to the width which we set. 

1
2
3
4
5
6
7
8
9
10
.blue-square-container {
  text-align: center;
}

.blue-square {
  background-color: #0074D9;
  width: 100px;
  height: 100px;
  display: inline-block;
}

Margin Auto Method

  • do not need a parent element.

    simply apply “margin: 0 auto” to our yellow box, as long as we have a defined width.

  • “margin: 0 auto” is shorthand for setting the top and bottom margins to zero, and the left and right margins to auto.

The width is important, since without the width defined, the browser will not
able to render the left and right margins to center the element. By setting the width the vbrowser will automatically distribute the right amount of margin on either side of the element.

The “0” portion can be set to any number of pixels you want for the top and bottom margins.

1
2
3
4
5
6
.yellow-square {
  background-color: #FFDC00;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

Another cool trick is just setting either margin-left to auto or margin-right to auto, which allows us to push our div to either the right or left side of the page, respectively (give this a try!).

Absolute Positioning Method

Absolute positioning an element allows us to essentially place the element wherever we want it on the page…with one drawback.

Absolute positioning removes the element from the flow of the page.

there are three steps we need to remember:

  • 1.Set the element’s position property to absolute
  • 2.Apply “left: 50%” to the element
  • 3.Set a margin-left of half of the element’s width(negative adjust)
1
2
3
4
5
6
7
8
.green-square {
  background-color: #3D9970;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

Transform/Translate Method

*Up until now we’ve only dealt with centering things horizontally, but what if we want to put something right in the middle of the page? both horizontally and vertically.

  • transform property set as translate can shift the x and y axios.

so the code like this, set both the left and top edge to 50%; and shift negative -50% for both sides.

1
2
3
4
5
6
7
8
9
.red-square {
  background-color: #FF4136;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

By setting the top property to 50% as well, I’m telling the browser to line up the top edge of our red square with the middle of the page vertically. But like in the previous example, we don’t want the edges to be lined up with the center, we want the center of our square to fit right on top of the center of our page.

There are many cool things you can do with transform, such as translating, rotating, and scaling animations, but for this example, we’ll be using translate.

We give the transform property “transform: translate(-50%, -50%)” and voila!

Our red square is centered both horizontally and vertically!

I love this method, because regardless of what the width or the height of our element is, it will always be in the center of the page.

This method is used frequently in responsive design and doesn’t require margins to be defined, like in the absolute positioning method.

Flexbox Method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
html,
body {
  height: 100%;
}

.purple-square-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purple-square {
  background-color: #B10DC9;
  width: 300px;
  height: 300px;
}

The four steps to centering horizontally and vertically with Flexbox are the following:

  • HTML, body, and parent container need to have a height of 100%
  • Set display to flex on parent container
  • Set align-items to center on parent container
  • Set justify-content to center on parent container

Setting display to flex on the parent defines it as a flex container.

By setting align-items to center, we’re saying that the children or flex items are to be centered vertically within the parent.

Justify-content works in the same way, but in the horizontal direction for our example.

This method goes well because again, it’s both responsive and doesn’t require any margin calculations.

A tutorial about flexbox

source link