Align the block to the center of the page.

Very often, the task is to align the block to the center of the page / screen, and even so that without a Java script, without setting hard sizes or negative indents, the scrollbars also work for the parent if the block exceeds its dimensions. There are a lot of monotonous examples in the network how to align the block in 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 specified links.

Option 1. Negative indent.

Position the block with the attributes top and left at 50%, and knowing in advance the height and width of the block, set the negative margin, which is equal to half the size of the block . A huge disadvantage of this option is that you need to calculate negative indents. The same block does not behave correctly in the environment of scrollbars - it is simply clipped because it has negative indents.

Example: jsfiddle.net/serdidg/pphzjh25/1 .
')

<div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> 

 .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 indent.

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

Example: jsfiddle.net/serdidg/sg0xbw88/1 .

 <div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> 

 .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.

Set the parent table styles, set the parent cell to align the text in the center. And the block set the model line block. The minuses we get are not working scrollbars, and in general, not the aesthetics of the "emulation" of the table.

Example: jsfiddle.net/serdidg/fk5nqh52/2 .

 <div class="parent"> <div class="inner"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> </div> 

 .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 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, as well as solves the original tasks. The bottom line is to set the parent's styles for the pseudo-element before, namely, 100% height, center alignment and the line block model. It is also the model itself that puts a line block model, centered. So that the block does not “fall” under the pseudo-element , when the dimensions of the first are larger than the parent , we specify the parent white-space: nowrap and font-size: 0, after which the block is canceled with the following styles - white-space: normal. In this example, font-size: 0 is needed in order to remove the resulting gap between the parent and the block due to the formatting of the code. The space can be removed in other ways, but the best is simply to prevent it.

Example: jsfiddle.net/serdidg/nfqg9rza/1 .
Examples without zero font-size: jsfiddle.net/serdidg/nfqg9rza/29 , jsfiddle.net/serdidg/nfqg9rza/39 .

 <div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> 

 .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: ''; } } .block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img { display: block; border: none; } } 

or if you need a parent to occupy only the height and width of the window, not the whole 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: ''; } } .block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img { display: block; border: none; } } 

Option 5. Flexbox.

One of the easiest and most elegant ways is to use flexbox. It does not require unnecessary gestures, it describes the essence of what is happening quite clearly, it has high flexibility. The only thing to remember when choosing this method is support for IE from version 10 inclusive. caniuse.com/#feat=flexbox

Example: jsfiddle.net/serdidg/zyzvsk9d/1 .

 <div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> 

 .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.

It is suitable if we are limited by the structure, and there is no possibility to manipulate the parent element, and the block needs to be aligned somehow. The css function is translate() . With a value of 50%, absolute positioning will position the upper left corner of the block exactly in the center, then a negative translate value will shift the block relative to its own dimensions. Note that negative effects may appear in the form of blurred edges or typefaces. Also, this method can lead to problems with calculating the position of a block using a java-script. Sometimes, to compensate for the loss of 50% of the width due to the use of the css property left , the rule set for the block can help: margin-right: -50%; .

Example. jsfiddle.net/serdidg/vjxxo7ua

 <div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> 

 .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.

The user of azproduction offered an option where the block is framed in a button tag. The button has the ability to center everything inside it, namely the elements of the lowercase and block-lowercase (inline-block) models. In practice, I do not recommend.

Example: jsfiddle.net/serdidg/0bn8wg38 .

 <button class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </button> 

 .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 the external indents for the block , and at the same time the latter will be adequately displayed in the environment of the scrollbars.
Example: jsfiddle.net/serdidg/nfqg9rza/2 .

You can also align the image in the center, and in case the picture is larger than the parent , scale it to the size of the parent .
Example: jsfiddle.net/serdidg/nfqg9rza/3 .
Example with a big picture: jsfiddle.net/serdidg/nfqg9rza/386