CSS is a cascading style sheet language. The old technology that appeared at the dawn of the WEB is actively developing today and allows you to solve many problems that previously required the use of JavaScript using native tools.
But at some points we still feel CSS weak. Block in the center of the block - such a trivial task is still an urgent problem for everyone who is still comprehending the basics of web development. With the advent of Flexbox and Grid Layout technologies, solving this problem has become much easier, but they are not supported by all browsers, and for the same IE 9 version you will have to look for other solutions. So, let's look at the basic ways to align blocks in CSS.
Horizontal alignment, or How to center a block in CSS
The easiest way is to center the block in the horizontal plane, there are immediately several simple and elegant solutions. The first way is to use the margin property, which is responsible for the outer margins and allows you to align the block in the center. CSS makes this very elegant. It is important not to confuse it with the padding property, thanks to which you can set the internal indentation on either side of the block, “pushing” the contents from the border and creating free space between them.
The second way is to use the text-align: center property if the block is set to line or line-to-block behavior (display: inline or display: inline-block).
Indent left and right through margin: 0 auto
The margin property allows you to effectively place a block in the CSS in the center of the parent block, that is, it is suitable for cases when each element has the display: block property set. Simply specify the margin parameter: 0 auto; in the CSS file or use the style attribute in the HTML code. Decipher the contents of this parameter:
- 0 - means the absence of external indentation above and below the element;
- Auto - tells your browser to independently calculate the indentation on the right and left, determining the free space on the sides and distributing it equally on each side of the block.
If everything is done correctly, then when setting the margin property: 0 auto; in CSS, the block in the center of the block will stand automatically. You can ask a reasonable question: "Why can not I ask margin: auto auto, aligning the block also vertically?" Unfortunately, this option will not work due to such a feature of the block model as the vertical collapse of outer margins.
What if the block is set to string behavior?
As we said above, one of the key features of CSS is that any block can be given one of several patterns of behavior. Above, we examined the case when an element is a block not only in appearance, but also in its “flow” position, in relation to other elements on the page.
Now we will consider the case when the object is set to line (display: inline) or line-block behavior (display: inline-block). In both the first and second cases, it will perceive the properties that govern the behavior of the text on the page. And to align the block in the center in CSS, the text-align: center parameter will help us, which allows us to solve the problem without any difficulties. We simply set it to the parent block, and our element automatically becomes exactly in the middle in the horizontal plane. It will be affected by other similar properties, such as vertical-align: middle, designed to center the text vertically.
Graceful CSS: use the position: absolute property
In CSS, centering a block is also possible using absolute positioning. To align elements in a non-standard way, position: relative properties are most often used, which allows you to move it in any direction while preserving the original place on the page, and through position: absolute, which completely “pulls” the element out of the stream and is ideal for placing a block in CSS in the center of the block in a vertical plane.
Suppose our object has a height of 100px and a width of 200px, a standard rectangle. To center it, we set it to the left and top margins of 50% (left: 50% and top: 50%), and after that, negative outer margins on these sides half the width and height of the block (margin-left: -100px and top: -50px). Explain this point in more detail.
The left and right properties with a value of 50% “take” the element by the upper left corner and place the CSS block in the center of the parent block. But that is not all. At the moment, in CSS, alignment of the block in the center cannot yet be called accurate, because in the center now there is only the top corner of the element. To achieve the best result, we need to move the element back half its width and height using the appropriate vertical indentation or the more complex transform: translate (-50%, -50%) property that performs the same function. Now the unit is perfectly positioned perfectly. In conclusion, we note that it is possible to solve the problem with the help of Flexbox technology, but it is intended for advanced users and does not work in all browsers.