Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to realize the absolute positioning technology of horizontal and vertical centering in CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Ⅰ. Absolute Positioning Center (Absolute Centering) technology

We often use margin:0 auto to achieve horizontal center, but we always think that margin:auto can not achieve vertical center. In fact, achieving vertical centering only requires declaring the element height and the following CSS:

.Absolute-Center {margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

I'm not the first person to do this, and maybe it's just a very common gadget. I dared to name it Absolute Centering, but most articles discussing vertical centring never mentioned it until I recently read the comments in the "How to Center Anything WithCSS" article. Both Simon and Priit mentioned this method in the list of comments.

If you have any extended features or suggestions, you can post here:

CodePen

SmashingMagazine

Twitter @ shshaw

Advantages:

1. Support for cross browsers, including IE8-IE10.

two。 No other special tags are needed, and the amount of CSS code is small.

3. Percentage% attribute values and min-/max- attributes are supported

4. Only this class can be used to center any content block

5. Can be centered whether or not padding is set (without using the box-sizing attribute)

6. Content blocks can be redrawn.

7. Perfectly support the center of the picture.

Disadvantages:

1. Height must be declared (see variable height Variable Height).

two。 It is recommended to set overflow:auto to prevent content from overflowing out of bounds. (view overflow Overflow).

3. Does not work on Windows Phone devices.

Browser compatibility:

Chrome,Firefox, Safari, Mobile Safari, IE8-10.

Absolute positioning method in the latest version of Chrome,Firefox, Safari, Mobile Safari, IE8-10. All the tests passed.

Comparison table:

Absolute centring is not the only way to achieve vertical centring. There are other ways to achieve vertical centering, and each has its own advantages. Which technology to use depends on whether your browser supports and the language markup you use. This comparison table will help you make the right choice according to your needs.

Explanation:

From the above description, the working mechanism of absolute centring (AbsoluteCentering) can be described as follows:

1. In normal content stream (normal content flow), the effect of margin:auto is equivalent to that of margin-top:0;margin-bottom:0.

W3C says If 'margin-top', or'margin-bottom' are' auto', their used value is 0.

2. Position:absolute makes the absolute positioning block jump out of the content stream, and the absolute positioning part of the rest of the content stream is not rendered.

Developer.mozilla.org:...an element that is positioned absolutely is taken out of the flow and thustakes up no space

3. Set top: 0; left: 0; bottom: 0; right: 0 for the block area; a bounding box will be reassigned to the browser, where the block block will fill all available space of its parent element, which is usually a body or a container declared as position:relative;.

Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of theelement's containing block (what theelement is positioned relative to).

4. Setting a height height or width width to the content block can prevent the content block from occupying all the available space, prompting the browser to recalculate the margin:auto according to the new bounding box

Developer.mozilla.org: The margin of the [absolutely positioned] element is then positioned inside these offsets.

5. Because the content block is absolutely positioned and deviates from the normal content stream, the browser will give margin-top,margin-bottom the same value, so that the element block is centered within the previously defined boundary.

W3.org: If none of the three [top, bottom,height] are 'auto': If both' margin-top' and 'margin-bottom' are' auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically

In this way, margin:auto seems to be designed for absolute Absolute Centering, so absolute Absolute Centering should be compatible with modern browsers that conform to standards.

In short (TL;DR): absolute positioning elements are not rendered in a normal content stream, so margin:auto can center the content vertically within the boundaries set by top: 0; left: 0; bottom: 0;

Centered approach:

1. The parent container of the content block in the container (Within Container) is set to position:relative. Using the above absolute centering method, the content can be centered and 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 rest of the following demo by default the above CSS style reference has been included, on this basis only provides additional classes for users to pursue to achieve different functions.

II. Visual area (Within Viewport)

Want to keep the content block in the visual area all the time? Set the content block to position:fixed; and set a larger value for the z-index cascading property.

.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 vertically centered on the entire document, rather than in the visual area.

3. Sidebar (Offsets)

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

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

IV. Responsive / adaptive (Responsive)

The biggest advantage of absolute centralization should be the perfect support for width and height in the form of percentage. Even attributes such as min-width/max-width and min-height/max-height behave as expected in the adaptive box.

.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 centring implementation of the content block element.

5. Spillover (Overflow)

The content height is greater than the block element or container (the view viewport or the parent container set to position:relative) will overflow, and the content may be displayed outside the block and container, or may be truncated and incomplete (the corresponding content block overflow attribute is set to visible and hidden respectively).

Plus overflow: auto will show scrollbars to the content block without crossing the boundary when the content height exceeds the container height.

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

VI. Redraw (Resizing)

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

Absolute Absolute Centering ensures that the content block is always centered, regardless of whether the content block is redrawn or not. You can set min-/max- to limit the size of content blocks according to your needs and prevent 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 property, you can use the CSS3 animation property transition to achieve a smooth transition between redrawn windows. Be sure to set overflow:auto; to prevent the size of the redrawn content block from being smaller than the actual size of the content.

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

Note:

Set the max-width/max-height attribute to make up for the content block padding, otherwise it may overflow.

Mobile browsers and IE8-IE10 browsers do not support the resize attribute, so if this part of the user experience is necessary for you, make sure there is a viable fallback for resizing your users.

Using the resize and transition properties together results in a transition animation delay when the user redraws.

7. Picture (Images)

Absolute center (AbsoluteCentering) also applies to pictures. Apply the class class or CSS style to the picture itself, and add the height:auto style to the picture, and the picture will be displayed adaptively in the center. If the outer container can be resize, then with the redrawing of the container, the picture will be redrawn accordingly and always remain centered.

It is important to note that although height:auto is useful for image centering, applying height:auto to the content block on the outer layer of the image will cause some problems: the regular content block will be stretched to fill the entire container. At this point, we can use variable height (Variable Height) to solve this problem. The reason for the problem may be to calculate the image height when rendering the image, just as you define the image height yourself, the browser will not parse the margin:auto vertical center like other cases when you get the image height. 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;}

It is best to apply this method to the image itself, as shown below:

8. Variable height (Variable Height)

To achieve absolute AbsoluteCentering in this case, you must declare a height, whether you are based on the 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 have the same effect as declaring height is to set display:table; so that no matter how high the actual content is, the content block remains centered. This approach can be problematic on some browsers (such as IE/FireFox), my partner Kalley

A detection function based on the Modernizr plug-in is written on ELL Creative (access ellcreative.com) to detect whether the browser supports this centring method and to further enhance the user experience.

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:

.absolute-Center.is-Variable {display: table; height: auto;}

Disadvantages:

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

1. Not compatible with the above method of redrawing (Resizing) case

2.Firefox/IE8: using display:table puts the content block vertically up, but horizontally in the middle.

3.IE9/10: using display:table will make the content block appear in the upper-left corner of the container.

4.Mobile Safari: the content block is centered vertically; if you use a percentage width, the horizontal center is slightly off-center.

Ⅱ. Other centrally implemented technologies

Absolute centring (Absolute Centering) is a very good technology, in addition to some ways to meet more specific needs, the most common recommendations: NegativeMargins, Transforms,Table-Cell, Inline-Block and emerging Flexbox. The way. Many of these methods are explained in depth in many articles, which are only briefly described here.

Negative outer margin (Negative Margins)

This is perhaps the most popular method of use at present. If the block element size is known, you can center the content block in the container display in the following ways:

The outer margin margin is negative, and the size is half of width/height (including padding when not using box-sizing: border-box), plus top: 50%; left: 50%; That is:

. is-Negative {width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left:-170px; / * (width + padding) / 2 * / margin-top:-120px; / * (height + padding) / 2 * /}

Tests show that this is the only way to perform well on IE6-IE7.

Advantages:

1. Good cross-browser features, compatible with IE6-IE7.

two。 The amount of code is small.

Disadvantages:

1. I can't adapt. Percentage size and min-/max- property settings are not supported.

two。 The content may overflow the container.

3. The margin size is related to padding and whether or not to define box-sizing: border-box, and the calculation needs to be based on different circumstances.

10. Deformation (Transforms)

This is the easiest way to achieve absolutely the same effect in the near future, and it also supports the use of joint variable height. The content block definition transform: translate (- 50% maxim 50%) must be prefixed with the browser manufacturer's prefix, plus

Top: 50%; left: 50%

Code class:

. is-Transformed {width: 50%; margin: auto; position: absolute; top: 50%; left: 50%;-webkit-transform: translate (- 50%);-ms-transform: translate (- 50%); transform: translate (- 50%);}

Advantages:

1. Content variable height

two。 Less code

Disadvantages:

1.IE8 does not support

two。 Property needs to write the browser vendor prefix

3. May interfere with other transform effects

4. In some cases, the rendering of text or element boundaries is blurred.

To learn more about the centralization of transform implementation, please refer to CSS-Tricks 's article "Centering PercentageWidth/Height Elements".

Table cells (Table-Cell)

Overall, this is probably the best way to centralize, because the height of the content block varies with the height of the actual content, and the browser is compatible with it. The biggest drawback is that you need a lot of extra tags, and you need three layers of elements to center the innermost elements.

HTML:

CSS:

.center-Container.is-Table {display: table;}. Is-Table. Table-Cell {display: table-cell; vertical-align: middle;}. Is-Table. Center-Block {width: 50%; margin: 0 auto;}

Advantages:

1. Height variable

two。 The content overflow pushes the parent element apart.

3. Good cross-browser compatibility.

Disadvantages:

Additional html tags are required

For more information on how to center table cells, please refer to Roger Johansson's article "Flexibleheight vertical centering with CSS, beyond IE7" published on 456bereastreet.

XII. Inline block elements (Inline-Block)

A popular centring implementation is based on the idea of using display: inline-block, vertical-align: middle and a pseudo element to center the content block in the container. The explanation of this concept can be found in the article "Centering in the Unknown" on CSS-Tricks.

My example also has some tips that you can't see anywhere else to help solve some small problems.

If the content block width is greater than the container width, for example, you put a very long text, but the content block width setting cannot exceed 100% of the container minus 0.25em, otherwise the pseudo element: after content block will be squeezed to the top of the container, and the: before content block will be offset downward by 100%.

If your content block needs to take up as much horizontal space as possible, you can use max-width: 99%; (for larger containers) or max-width: calc (100%-0.25em) (depending on the supported browser and container width).

HTML:

CSS:

.center-Container.is-Inline {text-align: center; overflow: auto;} .Center-Container.is-Inline:after,.is-Inline. Center-Block {display: inline-block; vertical-align: middle;} .Center-Container.is-Inline:after {content:'; height: 100%; margin-left:-0.25em. / * To offset spacing. May vary by font * /} .is-Inline. Center-Block {max-width: 99%; / * Prevents issues with long content causes the content block to be pushed to the top * / / * max-width: calc (100-0.25em) / * Only for IE9+ * /}

The pros and cons of this approach are similar to the cell Table-Cell approach, which I ignored at first because it is really a hack method. However, in any case, this is a popular usage and is well supported by browsers.

Advantages:

1. Height variable

two。 The content overflow pushes the parent element apart.

3. Support for cross-browser, but also suitable for IE7.

Disadvantages:

1. Need a container.

two。 Horizontal centering depends on margin-left:-0.25m; this size needs to be adjusted for different fonts / font sizes.

3. The width of the content block cannot exceed 100%-0.25em of the container.

For more related knowledge, refer to ChrisCoyier's article "Centeringin the Unknown".

XIII. Flexbox

This is the future trend of CSS layout. Flexbox is a new property of CSS3 and is designed to solve common layout problems such as vertical centering. Related articles such as "Centering Elements with Flexbox"

Keep in mind that Flexbox is not only used to center, but also can be sorted into columns or solve some maddening layout problems.

Advantages:

1. The width and height of the content block is arbitrary, elegant overflow.

two。 It can be used in more complex and advanced layout technologies.

Disadvantages:

1.IE8/IE9 does not support it.

2.Body requires specific containers and CSS styles.

3. Code running on modern browsers requires a browser vendor prefix.

4. There may be some problems with performance.

For articles about Flexbox Centering, please refer to David Storey's article "Designing CSS Layouts WithFlexbox Is As Easy As Pie".

Recommendations:

Each technology has its advantages and disadvantages. Which technology you choose depends on the supported browser and your coding. Use the above comparison table to help you make a decision.

As a simple alternative, absolute centralization (Absolute Centering) technology performs well. Where you used to use negative margins (Negative Margins), you can now use absolute center (Absolute Centering) instead. You no longer have to deal with annoying margin calculations and extra tags, and you can center content blocks with adaptive size.

If your site needs variable height content, try Table-Cell and inline block elements (Inline-Block). If you are on the verge of bleeding, try Flexbox and experience the benefits of this advanced layout technology.

This is the end of the introduction of "how to realize the absolute positioning technology of horizontal and vertical centering in CSS". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.