Center the block on the page.

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


We position the block with the top and left attributes by 50%, and knowing the height and width of the block in advance, 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 count the negative margins. Also, the block does not behave correctly surrounded by scrollbars - it is simply clipped because it has negative margins.

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



.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 margin auto. The advantage of this option is the working scrollbars of the parent , if the latter is set to 100% width and height. The disadvantage of this method is the rigid sizing.

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



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


We set the table styles to the parent, set the alignment of the text in the center of the parent 's cell . And to the block we set the model of the line block. The disadvantages we get are not working scrollbars, and generally not the aesthetics of the “emulation” of the table. Example: jsfiddle.net/serdidg/fk5nqh52/2 .





.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 another 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 tasks. The bottom line is to have the parent set styles for the before pseudo-element , namely 100% height, center alignment, and the line block model. In the same way, a block model is set for the block, center alignment. To prevent the block from “falling” under the pseudo-element , when the size of the first is larger than the parent , specify white-space: nowrap and font-size: 0 to the parent , after which the blockcancel these styles as follows - white-space: normal. In this example, font-size: 0 is needed in order to remove the gap between the parent and the block in connection with the formatting of the code. The gap can be removed in other ways, but the best is simply not to allow it.

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



.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 want the parent to occupy 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: '';
    }
}
.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 quite clearly describes the essence of what is happening, has high flexibility. The only thing to remember when choosing this method is IE support from version 10 inclusive. caniuse.com/#feat=flexbox

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



.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, and the block needs to be aligned somehow. The css function will come to the rescue translate(). With a value of 50%, absolute positioning will position the upper left corner of the block exactly in the center, then a negative value of translate will shift the block relative to its own dimensions. Please note that negative effects may appear in the form of blurry faces 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 of the use of css properties leftcan help in a given block rule: margin-right: -50%;.

Example. jsfiddle.net/serdidg/vjxxo7ua



.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 azproduction suggested an option where the block is framed in the button tag. The button has the ability to center everything that is inside it, namely the elements of the line and block-line (inline-block) models. In practice, I do not recommend using it.

Example: jsfiddle.net/serdidg/0bn8wg38 .



.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 outer margins for the block , and the latter will be adequately displayed surrounded by scrollbars.
Example: jsfiddle.net/serdidg/nfqg9rza/2 .

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

Also popular now: