Hello everyone, with you Kirill Mylnikov, frontend developer of Usetech.
Today I want to talk about vertical and horizontal centering of CSS (Cascading Style Sheets). There are many articles on this subject on the net, but I want to highlight all types of horizontal and vertical centering with examples.
The topic is very popular for those who simply compose or are engaged in full-fledged front-end development (after all, we always have to center something).
There are many ways to center an element, in some situations each method is good in its own way.
In this article, I will analyze the following types of centering:
— Horizontal centering;
— Vertical centering;
— Horizontal and vertical centering.
1. This property is only suitable for inline elements, just specify text-align: center on the parent.
2. The text-align: center property is no longer suitable for centering block elements. There is a simple and common property margin: 0 auto. All we need is to know the width of the block, and the margin 0 auto property will set the following values: above and below will be 0, and on the sides, the dimensions will be set automatically, and the element of block will stand in the center.
3. Margin centering is, of course, good, but there is also a flexible display: the flex property. We need to set this property on parent display: flex and justify-content: center.
justify-content: center-center the element.
4. The next property is display: grid.
The algorithm acts as with display: flex: set this property to the parent and specify justify-content: center.
Today, grid and flex box properties are very popular in web development. Next, I’ll show you how you can use these properties to center elements along horizontal and vertical axes.
5. Now I will show an unusual combination of text-align + display: inline-block properties.
Yes, you can also center one or more block elements if you need. In the very first example, I said that the text-align property only applies to inline elements, but if we specify the property to the block element display: inline-block, then it will become block-lowercase. This means the text-align property is available and the element is centered.
A little hint: display: inline-block will have to be set not on the parent block, but on each of the blocks to which we want to apply this property.
We have dealt with horizontal centering, now we will move on to vertical centering.
1. This property is suitable for tables — it’s vertical-align: middle.
When using this type of centering, consider the following conditions:
— We prescribe display: table to the parent;
— The child element must be assigned display: table-cell for the element to become a cell;
— We write the vertical-align property in the cell: middle and that’s it, the element becomes in the center.
2. There is such a case where the height of the centering element is known and the height of the parent can be any. Here we can apply absolute positioning. Now let’s see exactly what to do.
— Set child to position: absolute and omit top: 50%;
— Since the child element can have any height, we need to divide that height by 2 and store the result in margin-top as a negative value.
3. When we need to center a line already with a known height, we can just specify a line height and specify the same height.
4. We center using internal indents (filling):
— The element must be lowercase;
— The element must be placed on a single line.
5. Another vertical centering method using vertical alignment. I considered this property above, but using the tables example. Additionally, the property also works with display: inline/inline-block. In other words, with elements online.
You must consider the following conditions:
— The height of the parent must be known, and there is no centering element;
— The line-height property is inherited, so you need to know the correct line height.
6. Let’s imagine another case where the height of the centered element is unknown. Here absolute positioning will help us again. Let’s describe in detail what we need to do.
— Specify position: absolute child element and omit top element: 50%;
— Then in our element we write the property transform: translate (-50%) and that’s it, our element is in the center.
7. Use the display: flex property to center vertically. You can center entities vertically with this property. To do this, set the parent to show: flex, flex-direction: column, justify-content: center.
8. How to center vertically using the display: grid. In the case of vertical centering, everything is much simpler here than with flexbox. We need to specify the following properties to the parent: display:grid and align-items:center.
9. The next case is when the height of the child element is unknown and the parent is unknown. To set the centering, we need:
— Set the child to the position: absolute, top: 0, bottom: 0, after which it will extend to the full height of the outer block;
— We set the value margin: auto 0 on the child element for the vertical indents of the inner block.
10. The last means of vertical centering: if the height of the parent and the child are unknown, then the pseudo-element before will help us.
— At the parent, specify the pseudo-element before, write display: inline-block and specify the height as 100%.
— Thus, we occupy all the authorized height;
— The centered block is aligned to the center using vertical-align: middle.
Horizontal and vertical centering
It’s time to center the elements vertically and horizontally. Let’s look at specific examples.
1. If there are cases where the height and width of an element are unknown, you should do the following:
— specify the position: absolute, top: 50%, left: 50% and transform: translate (-50%, -50%) properties to the child element.
2. We return to the flexbox, which helps us like no other. We need to know the height and set the following properties: display flex; justify-content: center, align elements: center.
3. Grid doesn’t stand still either: the properties are almost identical, but we set display: grid instead of flex, respectively. Before using the grid, research support for this property in browsers.
4. There are situations where the width and height of the element are fixed, and for that we need:
— Withdrawal with negative values;
— Set position: absolute with the values top: 50%, left: 50% this and center the parent element.
5. If we want to center an inline, inline block, we need the vertical-align property. To do this, you need to specify the pseudo-element before the parent (I showed this example above), but in this case we need to center the elements on both axes – vertical and horizontal. To do this, we need to specify text-align: center to the parent.
6. I have already explained how you can center elements in arrays, but using an example with vertical centering. In the case of vertical and horizontal centering, you can go back to this step and specify the text-align: center property to the cell in the addition.
So we’ve sorted out all the ways to center in CSS. Each method is unique in its own way, and you should choose them depending on the situation. And which means do you use?