Detailed code explanation of eight ways to achieve centering with css absolute positioning

Absolutely positioned elements are not rendered in the normal content flow, so margin:auto can center the content vertically within the boundaries set by top: 0; left: 0; bottom: 0; right: 0;.

Centering method:

1. Within Container

The parent container of the content block is set to position:relative. Use the above absolute centering method to center the content. Displayed in the parent container.

.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 remaining demos below have included the above CSS styles by default. On this basis, only additional classes are provided for users to add to achieve different functions.

2. Within Viewport

Want the content block to stay within the visible area? Set the content block to position:fixed; and set a larger z-index stacking property value.

.Absolute-Center.is-Fixed {
  position: fixed;
  z-index: 999;
}

Note: For Mobile Safari, if the content block is not placed in a parent container set to position:relative;, the content block will be vertically centered in the entire document instead of vertically centered within the visible area.

3. Sidebar (Offsets)

If you want to set a fixed header or add other sidebars, you only need to add CSS style code like this to the style of the content block: top :70px;bottom:auto;Since margin:auto; has been declared, the content block will be vertically centered within the bounding box you define through the top, left, bottom and right properties.

You can anchor the content block to the left or right side of the screen, and keep the content block vertically centered. Use right:0;left:auto; to fix to the right side of the screen, and left:0;right:auto; to fix to the left side 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;
}

4. Responsive/Adaptive (Responsive)

The biggest advantage of absolute centering is that it supports perfect width and height in percentage form. Even the attributes min-width/max-width and min-height/max-height behave as expected within the adaptive box.

.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

Adding padding to the content block element does not affect the absolute centering of the content block element.

5. Overflow situation (Overflow)

If the content height is greater than the block element or container (viewport viewport or parent container set to position:relative), it will overflow. At this time, the content may be displayed. Outside the block and container, or being truncated, the display is incomplete (corresponding to the performance when the overflow attribute of the content block is set to visible and hidden respectively).

Add overflow: auto will display scroll bars for the content block without crossing the boundary 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 container height.

6. Resizing

You can use other classes or javascript code to redraw the content block while ensuring it is centered, without having to manually recalculate the center size. Of course, you can also add the resize attribute to allow users to drag and drop the content block to redraw it.

Absolute Centering can ensure that the content block is always centered, regardless of whether the content block is redrawn. You can limit the size of the content block according to your needs by setting min-/max- and prevent the content from overflowing the window/container.

.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 attribute, you can use the CSS3 animation attribute transition to achieve a smooth transition between redrawn windows. Be sure to set overflow:auto; to prevent the redrawn content block size from being smaller than the actual size of the content.

Absolute centering (AbsoluteCentering) is the only technology that supports the resize:both attribute to achieve vertical centering.

Note:

1. The max-width/max-height attributes must be set to make up for the padding of the content block, otherwise it may overflow.

2. Mobile browsers and IE8-IE10 browsers do not support the resize attribute, so if this part of the user experience is necessary for you, be sure to ensure that resizing is feasible for your users. retreat.

3. Using the resize and transition attributes together will generate a transition animation delay time when the user redraws.

7. Pictures (Images)

Absolute Centering (AbsoluteCentering) is also applicable to pictures. Apply a class or CSS style to the image itself, and add the height:auto style to the image. The image will be adaptively displayed in the center. If the outer container can be resized, as the container is redrawn, the image will be redrawn accordingly and always remain centered.

It should be noted that although height:auto is useful for centering the image, if height:auto is applied to the outer content block of the image, it will cause some problems: the regular content block will be stretched and filled. the entire container. At this time, we can use variable height (Variable Height) to solve this problem. The cause of the problem may be that the image height needs to be calculated when rendering the image. This is just like you define the image height yourself. Once the browser gets the image height, it will not parse margin:auto and center it vertically like other situations. So we'd better apply these styles to the image itself rather than the parent element.

HTML:

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

CSS:

.Absolute-Center.is-Image {
  height: auto;
}

.Absolute-Center.is-Image img { 
  width: 100%;
  height: auto;
}

8. Variable Height )

这种情况下实现绝对居中（AbsoluteCentering）必须要声明一个高度，不管你是基于百分比的高度还是通过max-height控制的高度，还有，别忘了设置合适的overflow属性。对自适应/响应式情景，这种方法很不错。

与声明高度效果相同的另一种方法是设置display:table;这样无论实际内容有多高，内容块都会保持居中。这种方法在一些浏览器（如IE/FireFox）上会有问题，我的搭档Kalley

在ELL Creative（访问ellcreative.com ）上写了一个基于Modernizr插件的检测函数，用来检测浏览器是否支持这种居中方法，进一步增强用户体验。

Javascript：

/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; 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;
}

浏览器兼容性不太好，若Modernizr不能满足你的需求，你需要寻找其他方法解决。

1.      与上述重绘(Resizing)情况的方法不兼容

2.      Firefox/IE8:使用display:table会使内容块垂直居上，不过水平还是居中的。

3.      IE9/10: 使用display:table会使内容块显示在容器左上角。

4.      Mobile Safari:内容块垂直居中；若使用百分比宽度，水平方向居中会稍微偏离中心位置。

The above is the detailed content of Detailed code explanation of eight ways to achieve centering with css absolute positioning. For more information, please follow other related articles on the PHP Chinese website!