Home Medicines from A to Z How to align text to the center, width, and edges of the page in HTML? Centering the div and other positioning subtleties.

How to align text to the center, width, and edges of the page in HTML? Centering the div and other positioning subtleties.

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. Aligning 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%); 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.

I think many of you who have had to deal with layout have encountered the need to align elements vertically and know the difficulties that arise when aligning an element to the center.

Yes, for vertical alignment there is a special vertical-align property in CSS with multiple values. However, in practice it doesn't work at all as expected. Let's try to figure this out.

Let's compare the following approaches. Align using:

tables,
indentation,
line-height
stretching,
negative margin,
transform
pseudo element
flexbox.

To illustrate, consider the following example.

There are two div elements, with one of them nested within the other. Let's give them the corresponding classes - outer and inner.

The challenge is to align the inner element with the center of the outer element.

First, let's consider the case when the dimensions of the external and internal blocks known. Let's add the rule display: inline-block to the inner element, and text-align: center and vertical-align: middle to the outer element.

Remember that alignment only applies to elements that have an inline or inline-block display mode.

Let's set the sizes of the blocks, as well as background colors so that we can see their borders.

Outer ( width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner ( display: inline-block; width: 100px; height: 100px; background-color : #fcc )
After applying the styles, we will see that the inner block is aligned horizontally, but not vertically:
http://jsfiddle.net/c1bgfffq/

Why did this happen? The thing is that the vertical-align property affects the alignment the element itself, not its contents(except when it is applied to table cells). Therefore the application of this property gave nothing to the external element. Moreover, applying this property to an inner element will also do nothing, since inline-blocks are aligned vertically relative to adjacent blocks, and in our case we have one inline block.

There are several techniques to solve this problem. Below we will take a closer look at each of them.

Alignment using a table

The first solution that comes to mind is to replace the outer block with a table of one cell. In this case, the alignment will be applied to the contents of the cell, that is, to the inner block.

http://jsfiddle.net/c1bgfffq/1/

Obvious minus this decision– from a semantic point of view, it is incorrect to use tables for alignment. The second disadvantage is that creating a table requires adding another element around the outer block.

The first minus can be partially removed by replacing the table and td tags with div and setting the table display mode in CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
However, the outer block will still remain a table with all the ensuing consequences.

Alignment using indents

If the heights of the inner and outer blocks are known, then the alignment can be set using the vertical indents of the inner block using the formula: (H outer – H inner) / 2.

Outer ( height: 200px; ) .inner ( height: 100px; margin: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

The downside of the solution is that it is applicable only in a limited number of cases when the heights of both blocks are known.

Alignment using line-height

If you know that the inner block should occupy no more than one line of text, then you can use the line-height property and set it equal to the height of the outer block. Since the content of the inner block should not wrap to the second line, it is recommended to also add the white-space: nowrap and overflow: hidden rules.

Outer ( height: 200px; line-height: 200px; ) .inner ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/

This technique can also be used to align multiline text if you redefine the line-height value for the inner block, and also add the display: inline-block and vertical-align: middle rules.

Outer ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/

Minus this method is that the height of the external block must be known.

Alignment using "stretch"

This method can be used when the height of the external block is unknown, but the height of the internal block is known.

To do this you need:

set relative positioning to the external block, and absolute positioning to the internal block;
add the rules top: 0 and bottom: 0 to the inner block, as a result of which it will stretch to the entire height of the outer block;
set the vertical padding of the inner block to auto.

.outer ( position: relative; ) .inner ( height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

The idea behind this technique is that setting a height for a stretched and absolutely positioned block causes the browser to calculate the vertical padding in an equal ratio if it is set to auto .

Alignment with negative margin-top

This method has become widely known and is used very often. Like the previous one, it is used when the height of the outer block is unknown, but the height of the inner one is known.

You need to set the external block to relative positioning, and the internal block to absolute positioning. Then you need to move the inner block down by half the height of the outer block top: 50% and raise it up by half its own height margin-top: -H inner / 2.

Outer ( position: relative; ) .inner ( height: 100px; position: absolute; top: 50%; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/

The disadvantage of this method is that the height of the indoor unit must be known.

Alignment with transform

This method is similar to the previous one, but it can be used when the height of the indoor unit is unknown. In this case, instead of setting a negative pixel padding, you can use the transform property and move the inner block up using the translateY function and a value of -50% .

Outer ( position: relative; ) .inner ( position: absolute; top: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Why was it impossible to set the value as a percentage in the previous method? Since percentage margin values are calculated relative to the parent element, a value of 50% would be half the height of the outer box, and we would need to raise the inner box to half its own height. The transform property is perfect for this.

The disadvantage of this method is that it cannot be used if the indoor unit has absolute positioning.

Alignment with Flexbox

The most modern way of vertical alignment is to use Flexible Box Layout (popularly known as Flexbox). This module allows you to flexibly control the positioning of elements on the page, arranging them almost anywhere. Center alignment for Flexbox is a very simple task.

The outer block needs to be set to display: flex and the inner block to margin: auto . And that's all! Beautiful, isn't it?

Outer ( display: flex; width: 200px; height: 200px; ) .inner ( width: 100px; margin: auto; )
http://jsfiddle.net/c1bgfffq/14/

The disadvantage of this method is that Flexbox is supported only by modern browsers.

Which method should I choose?

You need to start from the problem statement:

To vertically align text, it is better to use vertical indents or the line-height property.
For absolutely positioned elements with a known height (for example, icons), the method with a negative margin-top property is ideal.
For more complex cases When the height of the block is unknown, you need to use a pseudo element or the transform property.
Well, if you are so lucky that you do not need to support older versions of the IE browser, then, of course, it is better to use Flexbox.

Tags: Add tags

Every layout designer is constantly faced with the need to align content in a block: horizontally or vertically. There are several good articles on this subject, but they all offer a lot of interesting, but few practical options, which is why you have to spend extra time to highlight the main points. I decided to present this information in a form that is convenient for me, so as not to google anymore.

Aligning blocks with known sizes

The easiest way to use CSS is to align blocks that have a known height (for vertical alignment) or width (for horizontal alignment).

Alignment using padding

Sometimes you can not center an element, but add borders to it using the " padding".

For example, there is a picture of 200 by 200 pixels, and you need to center it in a block of 240 by 300. We can set the height and width of the outer block = 200px, and add 20 pixels at the top and bottom, and 50 at the left and right.

.example-wrapper1 ( background : #535E73 ; width : 200px ; height : 200px ; padding : 20px 50px ; )

Aligning Absolutely Positioned Blocks

If the block is set to " position: absolute", then it can be positioned relative to its closest parent with "position: relative". This requires all properties (" top","right","bottom","left") of the indoor unit assign same value, as well as "margin: auto".

*There is a nuance: The width (height) of the inner block + the value of left (right, bottom, top) should not exceed the dimensions of the parent block. It is safer to assign 0 (zero) to the left (right, bottom, top) properties.

.example-wrapper2 ( position : relative ; height : 250px ; background : url(space.jpg) ; ) .cat-king ( width : 200px ; height : 200px ; position : absolute ; top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; margin : auto ; background : url(king.png) ;

Horizontal alignment

Alignment using "text-align: center"

To align text in a block there is a special property " text-align". When set to " center"Each line of text will be aligned horizontally. For multi-line text, this solution is used extremely rarely; more often this option can be found for aligning spans, links or images.

I once had to come up with some text to show how text alignment works using CSS, but nothing interesting came to mind. At first I decided to copy a children's rhyme somewhere, but I remembered that this might spoil the uniqueness of the article, and our dear readers would not be able to find it on Google. And then I decided to write this paragraph - after all, the point is not with it, but the point is in alignment.

.example-text ( text-align : center ; padding : 10px ; background : #FF90B8 ; )

It's worth noting that this property will work not only for text, but also for any inline elements ("display: inline").

But this text is aligned to the left, but it is in a block that is centered relative to the wrapper.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; )

Aligning blocks using margin

Block elements with a known width can easily be aligned horizontally by setting them to "margin-left: auto; margin-right: auto". Usually the abbreviation is used: " margin: 0 auto" (any value can be used instead of zero). But this method is not suitable for vertical alignment.

.lama-wrapper ( height : 200px ; background : #F1BF88 ; ) .lama1 ( height : 200px ; width : 200px ; background : url(lama.jpg) ; margin : 0 auto ; )

This is how you should align all blocks, where possible (where fixed or absolute positioning is not required) - it is the most logical and adequate. Although this seems obvious, I have sometimes seen scary examples with negative indents, so I decided to clarify.

Vertical alignment

Vertical alignment is much more problematic - apparently, this was not provided for in the CSS. There are several ways to achieve the desired result, but all of them are not very beautiful.

Alignment with line-height property

In the case when there is only one line in a block, you can achieve its vertical alignment by using the " line-height" and setting it to the desired height. For reliability, it is worth setting also "height", the value of which will be equal to the value of "line-height", because the latter is not supported in all browsers.

.example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; )

It is also possible to achieve block alignment with several lines. To do this, you will have to use an additional wrapper block and set the line height to it. An internal block can be multi-line, but must be "inline". You need to apply "vertical-align: middle" to it.

.example-wrapper5 ( line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; font-size : 14px ; line-height : 1.5 ; vertical-align : middle ; background : #FFFAF2 ; color : #FF9B00 ;

The wrapper block must have "font-size: 0" set. If you don't set the font size to zero, the browser will add a few extra pixels. You will also have to specify the font size and line height for the inner block, because these properties are inherited from the parent.

Vertical alignment in tables

Property " vertical-align" also affects table cells. With the value set to "middle", the content inside the cell is aligned to the center. Of course, table layout is considered archaic nowadays, but in exceptional cases you can simulate it by specifying " display: table-cell".

I usually use this option for vertical alignment. Below is an example of layout taken from a completed project. It is the picture that is centered vertically in this way that is of interest.

.one_product .img_wrapper ( display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; ) .one_product img ( max-height : 169px ; max-width : 100 % ; min-width : 140px ; display : block ; margin : 0 auto ;

It should be remembered that if an element has a “float” set other than “none”, then it will in any case be block (display: block) - then you will have to use an additional block wrapper.

Alignment with an additional inline element

And for inline elements you can use " vertical-align: middle". Moreover, all elements with " display: inline" that are on the same line will align with a common center line.

You need to create an auxiliary block with a height equal to the height of the parent block, then the desired block will be centered. To do this, it is convenient to use the pseudo-elements:before or:after.

.example-wrapper6 ( height : 300px ; text-align : center ; background : #70DAF1 ; ) .pudge ( display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; width : 200px ; height : 200px ; .riki ( display : inline-block ; height : 100% ; vertical-align : middle ; )

Display: flex and alignment

If you don't care much about Explorer 8 users, or care so much that you're willing to insert a piece of extra javascript for them, then you can use "display: flex". Flex boxes are great at dealing with alignment issues, and just write "margin: auto" to center the content inside.

So far, I have practically never encountered this method, but there are no special restrictions for it.

.example-wrapper7 ( display : flex ; height : 300px ; background : #AEB96A ; ) .example-wrapper7 img ( margin : auto ; )

Well, that's all I wanted to write about CSS alignment. Now centering content will not be a problem!

CSS

HTML

I think many of you who have had to deal with layout have encountered the need to align elements vertically and know the difficulties that arise when aligning an element to the center.

Yes, for vertical alignment there is a special vertical-align property in CSS with multiple values. However, in practice it doesn't work at all as expected. Let's try to figure this out.

Let's compare the following approaches. Align using:

tables,
indentation,
line-height
stretching,
negative margin,
transform
pseudo element
flexbox.

To illustrate, consider the following example.

There are two div elements, with one of them nested within the other. Let's give them the corresponding classes - outer and inner.

The challenge is to align the inner element with the center of the outer element.

First, let's consider the case when the dimensions of the external and internal blocks known. Let's add the rule display: inline-block to the inner element, and text-align: center and vertical-align: middle to the outer element.

Remember that alignment only applies to elements that have an inline or inline-block display mode.

Let's set the sizes of the blocks, as well as background colors so that we can see their borders.

Outer ( width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner ( display: inline-block; width: 100px; height: 100px; background-color : #fcc )
After applying the styles, we will see that the inner block is aligned horizontally, but not vertically:
http://jsfiddle.net/c1bgfffq/

Why did this happen? The thing is that the vertical-align property affects the alignment the element itself, not its contents(except when it is applied to table cells). Therefore, applying this property to the outer element did not produce anything. Moreover, applying this property to an inner element will also do nothing, since inline-blocks are aligned vertically relative to adjacent blocks, and in our case we have one inline block.

There are several techniques to solve this problem. Below we will take a closer look at each of them.

Alignment using a table

The first solution that comes to mind is to replace the outer block with a table of one cell. In this case, the alignment will be applied to the contents of the cell, that is, to the inner block.

http://jsfiddle.net/c1bgfffq/1/

The obvious disadvantage of this solution is that, from a semantic point of view, it is incorrect to use tables for alignment. The second disadvantage is that creating a table requires adding another element around the outer block.

The first minus can be partially removed by replacing the table and td tags with div and setting the table display mode in CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
However, the outer block will still remain a table with all the ensuing consequences.

Alignment using indents

If the heights of the inner and outer blocks are known, then the alignment can be set using the vertical indents of the inner block using the formula: (H outer – H inner) / 2.

Outer ( height: 200px; ) .inner ( height: 100px; margin: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

The downside of the solution is that it is applicable only in a limited number of cases when the heights of both blocks are known.

Alignment using line-height

If you know that the inner block should occupy no more than one line of text, then you can use the line-height property and set it equal to the height of the outer block. Since the content of the inner block should not wrap to the second line, it is recommended to also add the white-space: nowrap and overflow: hidden rules.

Outer ( height: 200px; line-height: 200px; ) .inner ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/

This technique can also be used to align multiline text if you redefine the line-height value for the inner block, and also add the display: inline-block and vertical-align: middle rules.

Outer ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/

The disadvantage of this method is that the height of the external block must be known.

Alignment using "stretch"

This method can be used when the height of the external block is unknown, but the height of the internal block is known.

To do this you need:

set relative positioning to the external block, and absolute positioning to the internal block;
add the rules top: 0 and bottom: 0 to the inner block, as a result of which it will stretch to the entire height of the outer block;
set the vertical padding of the inner block to auto.

.outer ( position: relative; ) .inner ( height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

The idea behind this technique is that setting a height for a stretched and absolutely positioned block causes the browser to calculate the vertical padding in an equal ratio if it is set to auto .

Alignment with negative margin-top

This method has become widely known and is used very often. Like the previous one, it is used when the height of the outer block is unknown, but the height of the inner one is known.

You need to set the external block to relative positioning, and the internal block to absolute positioning. Then you need to move the inner block down by half the height of the outer block top: 50% and raise it up by half its own height margin-top: -H inner / 2.

Outer ( position: relative; ) .inner ( height: 100px; position: absolute; top: 50%; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/

The disadvantage of this method is that the height of the indoor unit must be known.

Alignment with transform

This method is similar to the previous one, but it can be used when the height of the indoor unit is unknown. In this case, instead of setting a negative pixel padding, you can use the transform property and move the inner block up using the translateY function and a value of -50% .

Outer ( position: relative; ) .inner ( position: absolute; top: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Why was it impossible to set the value as a percentage in the previous method? Since percentage margin values are calculated relative to the parent element, a value of 50% would be half the height of the outer box, and we would need to raise the inner box to half its own height. The transform property is perfect for this.

The disadvantage of this method is that it cannot be used if the indoor unit has absolute positioning.

Alignment with Flexbox

The most modern way of vertical alignment is to use Flexible Box Layout (popularly known as Flexbox). This module allows you to flexibly control the positioning of elements on the page, arranging them almost anywhere. Center alignment for Flexbox is a very simple task.

The outer block needs to be set to display: flex and the inner block to margin: auto . And that's all! Beautiful, isn't it?

Outer ( display: flex; width: 200px; height: 200px; ) .inner ( width: 100px; margin: auto; )
http://jsfiddle.net/c1bgfffq/14/

The disadvantage of this method is that Flexbox is supported only by modern browsers.

Which method should I choose?

You need to start from the problem statement:

To vertically align text, it is better to use vertical indents or the line-height property.
For absolutely positioned elements with a known height (for example, icons), the method with a negative margin-top property is ideal.
For more complex cases, when the height of the block is unknown, you need to use a pseudo element or the transform property.
Well, if you are so lucky that you do not need to support older versions of the IE browser, then, of course, it is better to use Flexbox.

Very often the task is to align a block in the center of the page / screen, and even so that without a Java script, without setting rigid dimensions or negative indents, and so that the scrollbars work for the parent if the block exceeds its size. There are quite a lot of monotonous examples on the Internet on how to align a block to the center of the screen. As a rule, most of them are based on the same principles.

Below are the main ways to solve the problem, their pros and cons. To understand the essence of the examples, I recommend reducing the height/width of the Result window in the examples at the links provided.

Option 1: Negative indentation.

Positioning block using the top and left attributes by 50%, and knowing the height and width of the block in advance, set a negative margin, which is equal to half the size block. A huge disadvantage of this option is that you need to count negative indents. Also block does not behave quite correctly when surrounded by scrollbars - it is simply cut off because it has negative margins.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 50%; left : 50%; margin: -125px 0 0 -125px; img (max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; ) )

Option 2. Automatic indentation.

Less common, but similar to the first. For block we set the width and height, position the attributes top right bottom left to 0, and set margin auto. The advantage of this option is working scrollbars parent, if the latter has 100% width and height. The disadvantage of this method is the rigid setting of dimensions.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img (max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; )

Option 3. Table.

Let's ask parent table styles, cell parent Set the text alignment to center. A block we set the line block model. The disadvantages we get are non-working scrollbars, and in general, the aesthetics of the “emulation” of the table are not.

Parent ( width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; > .inner ( display: table-cell; text-align: center; vertical-align: middle; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

To add a scroll to this example, you will have to add one more element to the design.
Example: jsfiddle.net/serdidg/fk5nqh52/3.

Option 4. Pseudo-element.

This option is devoid of all the problems listed in the previous methods, and also solves the original problems. The point is that parent set styles pseudo element before, namely 100% height, center alignment and inline block model. It’s the same with block a line block model is set, centered. To block didn't "fall" under pseudo element, when the dimensions of the first one are greater than parent, indicate parent white-space: nowrap and font-size: 0, after which block cancel these styles with the following - white-space: normal. IN in this example font-size: 0 is needed to remove the resulting space between parent And block due to code formatting. The space can be removed in other ways, but it is considered best to simply avoid it.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before ( height: 100%; display: inline-block; vertical-align: middle; content: ""; ; img (display: block; border: none; ) )

Or, if you need the parent to take up only the height and width of the window, and not the entire page:

Parent ( position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before ( height: 100%; display: inline-block; vertical-align: middle; content: ""; ( display: block; border: none; ) )

Option 5. Flexbox.

One of the simplest and most elegant ways is to use flexbox. It does not require unnecessary body movements, quite clearly describes the essence of what is happening, and is highly flexible. The only thing worth remembering when choosing this method is support for IE from version 10 inclusive. caniuse.com/#feat=flexbox

Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block ( background: #60a839; img ( display: block; border: none; ) )

Option 6. Transform.

Suitable if we are limited by the structure, and there is no way to manipulate the parent element, but the block needs to be aligned somehow. The css function translate() will come to the rescue. At 50% absolute positioning will position the top left corner of the block exactly in the center, then negative value translate will move the block relative to its own dimensions. Please note that negative effects may appear in the form of blurred edges or font style. Also, this method can lead to problems with calculating the position of the block using java-script. Sometimes, to compensate for the loss of 50% of the width due to the use of the CSS left property, the rule specified for the block can help: margin-right: -50%; .

Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; ) .block ( position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%); img ( display: block; ) )

Option 7. Button.

User azproduction option where block framed in a button tag. The button has the property of centering everything that is inside it, namely the elements of the inline and block-line (inline-block) model. In practice I do not recommend using it.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; ) .block ( display: inline-block; img (display: block;; border: none; ) )

Bonus

Using the idea of the 4th option, you can set external margins for block, and the latter will be adequately displayed surrounded by scrollbars.
Example: jsfiddle.net/serdidg/nfqg9rza/2.

You can also align the image to the center, and if the image is larger parent, scale it to size parent.
Example: jsfiddle.net/serdidg/nfqg9rza/3.
Example with a large picture: