At the end of my previous article, The Magic of a line of CSS code, I mentioned two quick ways to achieve horizontal and vertical centralization.

Of course, there are many ways to achieve horizontal and vertical centralization in CSS. Don’t be ready to x off the top right corner when you see horizontal and vertical centering. The point of this article is not to list how many ways to achieve horizontal and vertical centering, but to discuss the advantages and disadvantages of several common horizontal and vertical centering methods.

Uh huh? That is:

  • So many kinds of horizontal and vertical centralization, if you really need to use in business, which one will come to mind at first time?
  • Different horizontal and vertical centers, there are definitely differences, so what are the most significant differences?
  • Is there a perfect horizontal vertical center?

In this article, we will discuss four ways of centralizing horizontally and vertically, respectively, and see the picture below for each named aspect:

  1. absolute: position: absoluteCooperate withtop:50%; left:50%; transform:translate(-50%, -50%)
  2. autobot: display:flexCooperate withmargin:auto
  3. flex: display:flexCooperate withalign-items:center,justify-content:center
  4. grid: display:gridCooperate withplace-content:center;

Center a single element

For the following simple structure:

<div class="g-container">
    <div class="sub"></div>
</div>
Copy the code

For a single element, all four methods are fine, and no problem.

CodePen Demo — Centering in CSS

Center multiple elements

For slightly more complex structures like the following:

<div class="g-container">
    <div class="sub">1</div>
    <div class="sub">123</div>
    <div class="sub">123456</div>
</div>
Copy the code

So if it’s centered with multiple child elements, the above four methods can show a significant difference. Modify the element a little bit without giving it a width and use the padding to expand it:

.sub {
    border: 1px solid deeppink;
    padding: 10px;
    border-radius: 5px;
}
Copy the code

See how it turned out:

CodePen Demo — Centering in CSS 2

Simple analysis:

  1. absoluteBecause of the absolute positioning, in fact, the three child elements are stacked together
  2. flex 和 gridIf you do not manually add margins (margin or gap), paste them together
  3. By default, Flex aligns horizontally and Grid vertically without limiting orientation
  4. A very important point,gridThe width of the child elements under the layout,The widths of all child elements are forcibly stretched to the width of the content of the widest child element

For multiple child elements, absolute method is obviously not applicable. Next, we will focus on the differences of the remaining three methods in some details.

Control the spacing

What if we wanted to control the spacing between each element? Add a gap of 5px to autobot, Flex, and Grid containers.

.g-container{
    gap: 5px;
}
Copy the code

CodePen Demo — Centering in CSS 3

  1. margin: autoDue to the need to evenly divide the remaining space, so the performance is not good, not as we expected5pxWidth interval

Let the elements overflow

OK, next, let’s make it a little bit more, so much that it overflows the container and see what the difference is.

Here’s another vertical one:

CodePen Demo — Centering in CSS 4

You can see:

  1. A very important point, because there is noThe remaining space.margin: autoIt’s no longer evenly distributed, horizontally and vertically centered, but one side is attached to the side of the container and the other side is overflowing
  2. flex 和 gridI’ve done it all and I’m still centered horizontally and vertically even outside of the container space

To summarize

Through the above several demos can be seen in the current more commonly used horizontal vertical center scheme. The Flex solution is probably the best choice for now, keeping the interior elements horizontally and vertically centered in all environments without changing some of the characteristics of the child elements:

  1. Conveniently center a single element horizontally and vertically
  2. Conveniently center multiple elements horizontally and vertically, whether horizontal, vertical, or out of content
  3. It is very convenient to control the spacing between child elements
  4. Does not change the width of the child element

The fly in the ointment, of course, is that you may have to type a few more characters. :flushed:

Margin: Auto and Grid have more or less minor problems. Absolute cannot handle multiple elements.

The last

Just because CSS is simple doesn’t mean it’s easy. Many of the attributes that we use in our daily work actually have a lot of detail to dig into.

For example, we can compare the similarities and differences of the above horizontal and vertical centralization modes in different scenarios of writing mode, and so on.

If you want to Get the most interesting CSS information, don’t miss my official number – iCSS front-end interesting news

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.