CSS Vertical Centering Solution

Problem Scenario

The place of application is more common, there are two naked chestnuts:

There are also a lot of popular programs, here only for a variety of scenarios for the scenario to do some analysis

Problem abstraction

In fact, the vertical centering problem can be simplified into this way: a container HTML element (#container), an HTML element (#center) that needs to be centered. In special cases, the body may appear as #container, #center是图片, which is not discussed here. #center may or may not be high or responsive. In summary, the structure of the code is as follows:

Then there is the browser compatibility problem: Ie6,ie7 ..... Don't say, all is tears. In short, all we have to do is fill in the code with the appropriate code to achieve the goal. ：

Scenario I: Negative margin (negative Margins)

This scheme should be the most popular, the idea is relatively simple, browser compatibility (ie6+) is also better, but you must specify the height of #center, and can not be reactive processing (similar to height:60%,max-width:400px;)

This is the best solution if you can determine the #center height and need no response!

Scenario Two: Absolute centering (Absolute centering)

This method is compatible with ie8+, although it can be adaptive, although padding can not worry about, but still must declare the height! about how this scenario works:

• In normal content flow, the Margin:auto effect is equivalent to margin-top:0;margin-bottom:0.
• Position:absolute causes the absolute positioning block to jump out of the content stream, and the rest of the content stream renders when the absolute positioning portion is not rendered.
• Set the top:0 for the block area; left:0; bottom:0; right:0; a bounding box will be reassigned to the browser, at which point the block will populate all the free space for its parent element, which is usually the body or container declared as position:relative.
• Setting a height or width for a content block prevents the content block from occupying all available space, prompting the browser to recalculate Margin:auto based on the new bounding box
• Because the content block is absolutely positioned, out of the normal stream of content, the browser gives Margin-top,margin-bottom the same value, centering the element block within the previously defined boundary.
• In short: The absolute positioning element is not rendered in the normal content stream, so the Margin:auto can be centered vertically within the bounds of the top:0, left:0, bottom:0;right:0, and set boundaries.

Scenario Three: Deformation (Transforms)

This kind of scheme is an extension of the scheme one, it solves the problem that the scheme must specify the height, does not support the response type, but the browser is not compatible, only supports ie9+, but in the mobile version of the browser can be assured of the use of Oh!

In addition, this scheme may need to add a prefix on the transform, but if there is less and sass such things are much better, instant, and the disdain for IE!

Scenario Four: Table cells (Table-cell)

The idea is this: the <table><tr><td>I am Centered</td></tr></table> code is like this:

• 1. Redundant tag nesting that requires a wooden semantics
• 2. Compatible with ie8+
• 3. There may be problems with some browsers (ie in particular)

Because of the compatibility on some issues, this program is not very recommended.

Scenario Five: Inline block elements (Inline-block)

The idea is: expect in the #container: text-align:center; , in the #center: to vertical-align:middle; achieve the goal, but #center can not open #container, how to do? You can add an extra display for the Inline-block div (as a child of #container) inside the #container and open the #container height like this:

If supported: Before or: After the browser, you can tall hill some:

However, there are two questions:

• Because there is a gap between the elements of the two inline-block, you need to margin-right negative values in #center or font-size:0px in #container (if #center is a picture)
• #center的宽度不能大于#container的100%-clearance , otherwise the before will be squeezed out.

Programme VI: Flexbox

This should be the simplest, as follows:

The principle is: Margin:auto; automatically gets the remaining space in the telescopic container, sets the vertical margin value to auto, and allows the telescopic item to be fully focused on both upper axes of the telescopic container. I think that's actually the equivalent of this:

For Flexbox, please see here
But the disadvantage of flex is also obvious and does not support older browsers.

Summarize

The above various programs, each have a good shortage, I hope you hurriedly make suggestions, I will be able to general code all the whole to GitHub (here)

Reference

• http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
• Http://www.w3cplus.com/css3/a-guide-to-flexbox.html
• http://www.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
• Http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8D displaytable-cell%e7%9a%84%e5%ba%94%e7%94%a8/
• http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0% b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad/
• http://www.zhangxinxu.com/wordpress/2009/08/the horizontal vertical center of a picture or multiline text with no fixed size
• Http://designshack.net/articles/css/how-to-center-anything-with-css
• http://css-tricks.com/centering-in-the-unknown/
• Https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

CSS Vertical Centering Solution