CSS absolute positioning to achieve the center of the eight ways of code

The absolute positioning element is not rendered in the normal content stream, so margin:auto can make the content pass through top:0; left:0; bottom:0;right:0 the vertical center within the set boundary.

Centering mode:

First, inside the container (within Container)

The parent container of the content block is set to Position:relative, which can be centered in the parent container by using the absolute centering method above.

. Center-container {  position:relative;}. absolute-center {  width:50%;  height:50%;  Overflow:auto;  Margin:auto;  Position:absolute;  top:0; left:0; bottom:0; right:0;}

The rest of the following demo default CSS styles are included in the above, based on which only additional classes are provided for the user to append to achieve different functions.

Second, in the area (within Viewport)

Want to keep content blocks in the viewable area? Set the content block to Position:fixed, and set a large Z-index cascading property value.

. absolute-center.is-fixed {  position:fixed;  z-index:999;}

Note: For Mobilesafari, if the content block is not placed in the parent container set to Position:relative, the content block will be centered vertically across the entire document rather than vertically within the viewable area.

Third, sidebar (offsets)

If you want to set a headspace header or add another sidebar, just add a CSS style code like this in the style of the content block: Top:70px;bottom:auto; Because the Margin:auto is already declared, the content block will be vertically centered on you through Top,left, The bottom and right properties are defined within the bounding box.

You can pin the content block to the left or right side of the screen, and keep the content block vertically centered. Use Right:0;left:auto; fixed to the right of the screen, use Left:0;right:auto; fixed to the left of the screen.

. absolute-center.is-right {  left:auto; right:20px;  Text-align:right;}. absolute-center.is-left {  right:auto; left:20px;  Text-align:left;}

Iv. Responsive/adaptive (responsive)

The biggest advantage of absolute centering should be the perfect support for the wide height of the percentage form. Even the Min-width/max-width and Min-height/max-height properties are consistent with expectations in adaptive boxes.

. absolute-center.is-responsive {  width:60%;   height:60%;  min-width:200px;  max-width:400px;  padding:40px;}

Adding padding to a content block element does not affect the absolute center implementation of the content block element.

V. Spillover conditions (Overflow)

The content height is greater than the block element or container (the viewport viewport or the parent container set to position:relative) overflows, and the content may appear outside the block and container. Or truncated appear incomplete (respectively corresponding content block overflow property set to visible and hidden performance).

Plus Overflow:auto will show the scrollbar without crossing the content block when the content height exceeds the height of the container.

. Absolute-center.is-overflow {  Overflow:auto;}

If the content block itself does not set any padding, you can set max-height:100% to ensure that the content height does not exceed the height of the container.

Six, redraw (resizing)

You can use other class classes or JavaScript code to redraw the content block while maintaining centering, without having to manually recalculate the compute center dimensions. Of course, you can also add the Resize property to allow the user to drag and drop the content block for redrawing.

Absolute centering (Absolute centering) guarantees that the content block is always centered, regardless of whether the content block is redrawn. You can set min-/max-to limit the size of content blocks to your own needs and prevent content from spilling over windows/containers.

. absolute-center.is-resizable {  min-width:20%;  max-width:80%;  min-height:20%;  max-height:80%;  Resize:both;  Overflow:auto;}

If you do not use the Resize:both property, you can use the CSS3 Animation property transition to achieve a smooth transition between the redrawn windows. Be sure to set the Overflow:auto in case the redrawn content block size is less than the actual size of the content.

Absolute centering (absolutecentering) is the only technique that supports the vertical centering of the Resize:both property.

Attention:

1. To set the Max-width/max-height property to compensate for content block padding, it may overflow.

2. The mobile browser and Ie8-ie10 browser do not support the resize attribute, so if this part of the user experience is necessary for you, make sure that you have a viable fallback to resizing your users.

3. Using the Resize and transition properties together creates a transition animation delay time when the user redraws.

Vii. pictures (Images)

Absolute centering (absolutecentering) also applies to pictures. Apply the class or CSS style to the picture itself, and add the Height:auto style to the picture, and the picture will be automatically centered, if the outer container can be resize, and the picture will redraw as the container is redrawn, always centered.

It is important to note that although Height:auto is useful for centering a picture, it is problematic to apply height:auto to the content block on the outer layer of the image: the content block of the rule is stretched to fill the entire container. At this point, we can use the variable height (Variable height) method to solve this problem. The problem may be that when you render a picture, you calculate the height of the picture, as you define the height of the image, and the browser gets the height of the image so that it does not parse the Margin:auto vertically, as in any other case. So we'd better apply these styles to the picture itself instead of the parent element.

Html:

Css:

. absolute-center.is-image {  Height:auto;}. Absolute-center.is-image img {   width:100%;  Height:auto;}

Eight, variable height (Variable height)

In this case, absolute centering (absolutecentering) must declare a height, whether you are based on a percentage height or the height controlled by max-height, and don't forget to set the appropriate overflow property. This approach is good for adaptive/responsive scenarios.

Another way to declare a high effect is to set display:table so that content blocks remain centered no matter how high the actual content is. This method will be problematic on some browsers (such as Ie/firefox), my partner Kalley

A MODERNIZR plugin-based detection function was written on ell Creative (Access ellcreative.com) to detect whether the browser supports this centering method and to further enhance the user experience.

Javascript:

/* Modernizr Test for Variable Height Content */modernizr.teststyles (' #modernizr {display:table; height:50px; width:50 px Margin:auto; Position:absolute; top:0; left:0; bottom:0; right:0; } ', function (elem, rule) {  modernizr.addtest (' Absolutecentercontent ', Math.Round (WINDOW.INNERHEIGHT/2-25) = = = elem.offsettop);});

Css:

. absolutecentercontent. absolute-center.is-variable {  display:table;  Height:auto;}

Browser compatibility is not very good, if Modernizr does not meet your needs, you need to find other ways to solve.

1. Incompatible with the method described above for redrawing (resizing)

2. FIREFOX/IE8: Using display:table will make the content block vertical, but the level is still centered.

3. IE9/10: Using display:table causes the content block to appear in the upper-left corner of the container.

4. Mobile Safari: The content block is centered vertically; If you use percent width, the horizontal center is slightly off-center.