Aligning elements horizontally and vertically can be done in various ways. The choice of method depends on the type of element (block or inline), the type of its positioning, size, etc.

1. Horizontal alignment to the center of the block/page

1.1. If the block width is specified:

div ( width: 300px; margin: 0 auto; /*center the element horizontally within the parent block*/ )

If you want to align an inline element this way, it needs to be set to display: block;

1.2. If a block is nested within another block and its width is not specified/specified:

.wrapper(text-align: center;)

1.3. If the block has a width and needs to be centered on its parent block:

.wrapper (position: relative; /*set relative positioning for the parent block so that we can then absolutely position the block inside it*/) .box ( width: 400px; position: absolute; left: 50%; margin-left: -200px; / *shift the block to the left by a distance equal to half its width*/ )

1.4. If the blocks don't have a width specified, you can center them using a parent wrapper block:

.wrapper (text-align: center; /*place the contents of the block in the center*/) .box ( display: inline-block; /*arrange the blocks horizontally*/ margin-right: -0.25em; /*remove the right space between blocks*/ )

2. Vertical alignment

2.1. If the text occupies one line, for example, for buttons and menu items:

.button ( height: 50px; line-height: 50px; )

2.2. To vertically align a block within a parent block:

.wrapper (position: relative;).box ( height: 100px; position: absolute; top: 50%; margin: -50px 0 0 0; )

2.3. Vertical alignment by table type:

.wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; )

2.4. If a block has a given width and height and needs to be centered on its parent block:

.wrapper ( position: relative; ) .box ( height: 100px; width: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: auto; /*to the content did not spread */ )

2.5. Absolute positioning at the center of the page/block using CSS3 transformation:

if dimensions are specified for the element

div ( width: 300px; /*set the width of the block*/ height:100px; /*set the height of the block*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50% ; )

if the element has no dimensions and is not empty

h1 ( margin: 0; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; )

In CSS, some seemingly simple things are not so easy to do. One of these things is alignment, i.e. when one element needs to be positioned in a certain way relative to another.

This article presents some ready-made solutions that will help simplify the work of centering elements horizontally and/or vertically.

Note: Below each solution is a list of browsers indicating the versions in which the specified CSS code works.

CSS - Center Align Block

1. Align one block to the center of another. In this case, the first and second blocks have dynamic sizes.

Parent ( position: relative; ) .child ( position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); ; )

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Aligning one block to the center of another. In this case, the second block has fixed dimensions.

Parent ( position: relative; ) .child ( position: absolute; left: 50%; top: 50%; /* width and height of 2 blocks */ width: 500px; height: 250px; /* Values ​​are determined depending on its size */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px )

Browsers that support this solution:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Aligning one block to the center of another. In this case, the second block has dimensions specified in percentages.

Parent ( position: relative; ) .child ( position: absolute; /* width and height of 2 blocks in % */ height: 50%; width: 50%; /* Values ​​are determined depending on its size in % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ )

Browsers that support this solution:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Horizontal Alignment

1. Aligning one block element (display: block) relative to another (in which it is located) horizontally:

Block ( margin-left: auto; margin-right: auto; )

Browsers that support this solution:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Align a line (display: inline) or line-block (display: inline-block) element horizontally:

Parent ( text-align: center; ) .child ( display: inline-block; )

Browsers that support this solution:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Vertical Alignment

1. Center one element (display: inline, display: inline-block) relative to the other (in which it is located) in the center. The parent block in this example has a fixed height, which is set using the CSS line-height property.

Parent ( line-height: 500px; ) .child ( display: inline-block; vertical-align: middle; )

Browsers that support this solution:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Centering one block relative to another vertically by representing the parent as a table, and the child as a cell of this table.

Parent ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

Browsers that support this solution:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

If you know any other interesting tricks or useful ready-made alignment solutions, then share them in the comments.

Align text vertically in CSS- a very difficult job. I've seen enough people struggle with this that I constantly find "critical" errors when it comes to actual responsive design.

But fear not: if you're already struggling with CSS vertical alignment, you've come to the right place.

Let's talk about the CSS vertical align property

When I first started working in web development, I struggled a bit with this property. I thought it should work like a classic property" text-align" Oh, if only everything were so simple...

vertical-align CSS property works great with tables, but not with divs or other elements. When you use it on a div, it aligns the element relative to other divs, but not its content. In this case, the property only works with display: inline-block; .

See example

We want to center the content, not the div itself!

You have two options. If you only have text divs, you can use the line-height property. This means that you need to know the height of the element, but you cannot set it. This way your text will always be in the center.

The truth about this approach CSS vertical alignment there is a drawback. If the text is multi-line, then the line height will be multiplied by the number of lines. Most likely, in this case, you will end up with a terribly laid out page.

Take a look at this example

If the content you want to center consists of more than one line, then it is better to use table divs. You can also use tables, but this is not semantically correct. If you need breaks for responsive purposes, it's better to use div elements.

For this to work, there must be a parent container with display: table and inside it the desired number of columns that you want to center using display: table-cell and vertical-align: middle .

See example

Why does this work with table markup but not with div elements? Because the rows in the table have the same height. When a table cell's content does not use all the available height space, the browser automatically adds vertical padding to center the content.

position property

Let's start with the basics of CSS div vertical alignment:

• position: static is the default. The element is rendered according to HTML order;
• position: absolute - used to determine the exact position of an element. This position is always related to the closest relatively positioned parent element (not static). If you don't determine the exact position of an element, you will lose control of it. It will appear randomly, completely ignoring the flow of the document. By default, the element appears in the upper left corner;
• position: relative - used to position an element relative to its normal position (static). This value preserves the document flow order;
• position: fixed - used to position the element relative to the browser window so it is always visible in the viewport.

Note: some properties ( top and z-index) only work if the element is set to position (not static).

Let's get down to business!

Do you want to implement CSS vertical center alignment? First create an element with relative position and dimensions. For example: 100% in width and height.

The second step may vary depending on the target browsers, but you can use one of two options:

• Old property: need to know the exact size of the window to remove half the width and half the height. See example;
• New CSS3 property: You can add a transform property with a translate value of 50% and the block will always be in the center. View example.

Basically, if you want to center content, never use top: 40% or left: 300px . This works fine on test screens, but it is not centered.

Remember position: fixed ? You can do the same thing with it as with an absolute position, but you don't need a relative position for the parent element - it will always be positioned relative to the browser window.

Have you heard of the flexbox specification?

You can use flexbox. This is much better than any other option center text alignment CSS vertically. With flexbox, managing elements is like child's play. The problem is that you need to discard some browsers such as IE9 and versions below. Here's an example of how to vertically center a block:

View example

Using a flexbox layout, you can center multiple blocks.

If you apply what you learn from these examples, you can master CSS vertical block alignment as soon as possible.

Links and further reading

Learning CSS markup

FlexBox Froggy

Flexbox sandbox

Translation of the article “ CSS Vertical Align for Everyone (Dummies Included)” was prepared by the friendly project team.

When laying out a page, it is often necessary to perform center alignment using the CSS method: for example, centering the main block. There are several options for solving this problem, each of which sooner or later has to be used by any layout designer.

Center text alignment

Often, for decorative purposes, it is necessary to set text alignment to the center; CSS in this case allows you to reduce layout time. Previously, this was done using HTML attributes, but now the standard requires text to be aligned using style sheets. Unlike blocks, for which you need to change the margins, in CSS, centering text is done using a single line:

• text-align:center;

This property is inherited and passed on from the parent to all descendants. Affects not only the text, but also other elements. To do this, they must be inline (for example, span) or inline-block (any blocks that have the display: block property set). The latter option also allows you to change the width and height of the element and adjust the indents more flexibly.

Often on pages, align is assigned to the tag itself. This immediately invalidates the code, since the W3C has deprecated the align attribute. Using it on a page is not recommended.

Aligning a block to the center

If you need to center a div, CSS offers a pretty convenient way: using margins. Indents can be set for both block elements and inline-block elements. The property value should be 0 (vertical padding) and auto (automatic horizontal padding):

• margin:0 auto;

Now this option is recognized as absolutely valid. Using external padding also allows you to set the image to be centered: it allows you to solve many problems related to the positioning of an element on the page.

Align a block left or right

Sometimes CSS center alignment is not required, but you need to place two blocks side by side: one on the left edge, the other on the right. For this purpose, there is a float property, which can take one of three values: left, right or none. Let's say you have two blocks that need to be placed side by side. Then the code will be like this:

• .left (float:left;)
• .right(float:right)

If there is also a third block that should be located under the first two blocks (for example, a footer), then it needs to be given the clear property:

• .left (float:left;)
• .right(float:right)
• footer (clear:both)

The fact is that blocks with the classes left and right fall out of the general flow, that is, all other elements ignore the very existence of aligned elements. The clear:both property allows the footer or any other block to see elements that have fallen out of the flow and prohibits float on both the left and right. Therefore, in our example, the footer will move down.

Vertical alignment

There are times when it is not enough to set the center alignment using CSS methods; you also need to change the vertical position of the child block. Any inline or inline-block element can be nested at the top or bottom edge, in the middle of a parent element, or in any location. Most often, the block needs to be aligned to the center; for this, the vertical-align attribute is used. Let's say there are two blocks, one nested inside the other. In this case, the inner block is an inline-block element (display: inline-block). You need to align the child block vertically:

• top alignment - .child(vertical-align:top);
• center alignment - .child(vertical-align:middle);
• bottom alignment - .child(vertical-align:bottom);

Neither text-align nor vertical-align affects block elements.

Possible problems with aligned blocks

Sometimes centering a div using CSS can cause a little trouble. For example, when using float: let's say there are three blocks: .first, .second and .third. The second and third blocks lie in the first. The element with class second is left aligned, and the last block is right aligned. After leveling off, both fell out of the flow. If the parent element does not have a height set (for example, 30em), then it will no longer stretch to the height of its child blocks. To avoid this error, use a “spacer” - a special block that sees .second and .third. CSS code:

• .second(float:left)
• .third(float:right)
• .clearfix(height:0; clear: both;)

The pseudo-class:after is often used, which also allows you to return the blocks to their place by creating a pseudo-spacer (in the example, a div with the container class lies inside.first and contains.left and.right):

• .left(float:left)
• .right(float:right)
• .container:after(content:""; display:table; clear:both;)

The above options are the most common, although there are several variations. You can always find the simplest and most convenient way to create a pseudo-spacer through experimentation.

Another problem that layout designers often encounter is the alignment of inline-block elements. A space is automatically added after each of them. The margin property, which is set to a negative indent, helps to cope with this. There are other methods that are used much less frequently: for example, zeroing. In this case, font-size: 0 is written in the properties of the parent element. If there is text inside blocks, then the required font size is already returned in the properties of inline-block elements. For example, font-size:1em. This method is not always convenient, so the option with external indents is much more often used.

Aligning blocks allows you to create beautiful and functional pages: this includes the layout of the overall layout, the arrangement of products in online stores, and photographs on a business card website.

Aligning elements on a web page can be a challenging task, especially when it comes to vertically aligning text. This question is often found on forums, and solving this issue is especially difficult for novice users. But in reality there is nothing complicated here. All you need is a little knowledge of CSS Cascading Style Sheets. Since this is all done due to its rules.

Vertical text alignment can be achieved in at least five different ways. Each of them is good in its own way, given the circumstances and details of the situation. We will look at several examples, and based on the conditions, you will choose the appropriate rotation for yourself.

First method with line-height

The first method is very banal and has a big drawback, which limits its application. But still, whatever one may say, it can be useful and even bring the desired result. This will be a conditional alignment, since we are essentially setting the line height to match the block height using the line-height property.

first example. demo #1

/* No.1 */ .talign1( border: 1px solid red; height:200px;/* block height */ ) .talign1 > p( line-height:200px;/* set the line height according to the block height */ margin :0;/* remove outer padding, if any */ text-align:center;/* align the text horizontally with the center */ padding: 0;/* remove inner padding, if any */ ) /* end No. 1*/

In exactly the same way, it is possible to implement the image in the vertical center, but by adding one new property vertical-align: middle; .

Example. Demo #2

/* No.2 */ .talign2( border: 1px solid red; line-height:200px;/* block line height */ ) .talign2 div( text-align:center;/* align elements horizontally centered */ ) .talign2 img( vertical-align:middle;/* align the images vertically in the center */ border: 1px solid black; ) /* end №2*/

Alignment with position property

This method is widely used in many CSS tasks, including our task. But it should be noted that it is not completely perfect and has its side effects. This is because the element's percent centering will be centered on the top left edge of the inner block.

Therefore, you need to set a negative value for the margins. The size of the indentation on the top should correspond to half the height of the internal block, and the indentation on the left should correspond to half the width. Thus, we obtain the absolute center.

In this option, it is probably mandatory to know the exact height and width of the child element. Otherwise, incorrect centering may occur.

/* No.3 */ .talign3( border: 1px solid red; height:200px;/* block height */ position: relative; ) .talign3 div( position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -5% 0 0 -25%; border: 1px solid black;

Alignment with table property

Here we use an old technique, turning the elements into a table with cells. In this case, the table tags

will not apply, but will use CSS properties such as display: table; , display: table-cell; . In older versions of IE, this method does not work, and it is not necessary. Does anyone else actually use them?

Example. demo #4

/* No.4 */ .talign4( border: 1px solid red; height:200px;/* block height */ display: table; width: 100%; ) .talign4 div( display: table-cell; vertical-align: middle ; text-align:center ) /* end #4*/

Alignment with flex property

This is a more specific version with properties that are not so often found in website layout. But, nevertheless, in rare cases they are very useful.