[Front-end strategy] The most comprehensive horizontal and vertical centering solution and flexbox layout_html/css

[Front-end strategy] The most comprehensive horizontal and vertical centering solution and flexbox layout_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:45:54

Original

1267 people have browsed it

Recently, I have encountered many vertical centering problems. This is a very common problem in CSS layout. For example, vertical centering of various containers with fixed length and fixed width or variable length and width is actually possible. Many solutions. And after the emergence of CSS3's flexbox, it has become easier to solve various centering problems. I searched the garden for articles about flexbox and found that many of them are not detailed enough, so I would like to introduce flexbox while summarizing various vertical centering methods.

From simple to complex:

Horizontal centering of inline elements

To implement inline elements (, , etc.) To horizontally center the inline elements, just wrap the inline elements in block-level parent elements (

, etc.), and set the parent element CSS as follows:

1 #container{2     text-align:center; 3 }

Copy after login

and applies to text, links, and inline or inline-block, inline-table and inline-flex.

Demo

Horizontal centering of block elements

To implement block elements (display :block), we only need to set its left and right margins margin-left and margin-right to auto to achieve the centering of block elements. The CSS settings for block elements to be horizontally centered are as follows:

1 #center{2     margin:0 auto;3 }

Copy after login

Demo

Horizontal centering of multiple block elements

To achieve horizontal centering of multiple horizontally arranged block elements, the traditional method is to set the block elements to be arranged horizontally to display:inline-block, and then set text-align:center on the parent element to achieve the same result as above The same effect as horizontal centering of inline elements.

1 #container{2     text-align:center;3 }4 5 #center{6     display:inline-block;7 }

Copy after login

　Demo

Use flexbox to achieve horizontal centering of multiple block elements

Before using it, let’s first introduce flexbox.

The Flexbox layout (Flexible Box) module is designed to provide a more efficient way to formulate, adjust and distribute the layout of items in a container, even if their size is unknown or dynamic. It is a new layout mode in CSS3, designed for more complex web page requirements in modern networks.

Flexbox has been quickly supported by browsers. Chrome 22, Opera 12.1, and Opera Mobile 12.1, Firefox18 already supports Flexbox as described in this article.

Learn to use flexbox

To set a flexbox layout for an element, just set the display attribute value to flex.

1 #container {2     display: flex;3 }

Copy after login

flexbox defaults to a block-level element. If you need to define it as an inline-level element, the same applies:

1 #container {2     display: inline-flex;3 }

Copy after login

Flexbox consists of flex containers and flex items. You can get a flex container by setting the element's display property to flex or inline-flex. A container set to flex is rendered as a block-level element, while a container set to inline-flex is rendered as an inline element. For each container that is set to flex, its internal elements will become a flex item, that is, a retractable item. Simply put, flex defines how the flex items in the flex container should be laid out.

Back to the topic, use flexbox to achieve horizontal centering of multiple block elements. You only need to set the Css of the parent container as follows:

1 #container{2     justify-content:center;3     display:flex;4 }

Copy after login

　Demo

Horizontal and vertical centering of elements with known height and width

Method 1.

Absolute positioning and negative margin implementation.

Use absolute positioning, set the top and left attributes of the element to 50%, and then use margin to pull the element back to half its height and width to achieve vertical centering. The core CSS code is as follows:

 1 #container{ 2     position:relative; 3 } 4  5 #center{ 6     width:100px; 7     height:100px; 8     position:absolute; 9     top:50%;10     left:50%;11     margin:-50px 0 0 -50px;12 }

Copy after login

　Demo

Method 2.

Absolute positioning and margin.

This method also uses absolute positioning and margin, but there is no need to know the height and width of the vertically centered element. The core code is as follows:

 1 #container{ 2     position:relative; 3 } 4  5 #center{ 6     position:absolute; 7     margin:auto; 8     top:0; 9     bottom:0;10     left:0;11     right:0;12 }

Copy after login

(Same as above, so no screenshots are taken)

Demo

Unknown height Horizontal and vertical centering of width elements

Method 1. When the element to be centered is an inline or inline-block element

When the element to be centered When it is inline or inline-block, you can cleverly set the parent container to display:table-cell, and use text-align:center and vertical-align:middle to achieve horizontal and vertical centering.

The core code is as follows:

1 #container{2     display:table-cell;3     text-align:center;4     vertical-align:middle;5 }6 7 #center{8 9 }

Copy after login

Demo

Method 2. Css3 shows its power

Using the transform of Css3, you can easily achieve vertical centering of elements without knowing the height and width of the element.

The core code is as follows:

 1 #container{ 2     position:relative; 3 } 4  5 #center{ 6     position: absolute; 7     top: 50%; 8     left: 50%; 9     transform: translate(-50%, -50%);10 }

Copy after login

　Demo

法三. flex布局轻松解决

使用flex布局，无需绝对定位等改变布局的操作，可以轻松实现元素的水平垂直居中。

核心代码如下：

1 #container{2     display:flex;3     justify-content:center;4     align-items: center;5 }6 7 #center{8 9 }

Copy after login

　　Demo

一些总结

CSS3的transform和flex固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。

某些浏览器仍需使用前缀写法:

1 .flexboxtest{2   display: flex;3   display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀4 }

Copy after login

浏览器对最新版本的flexbox 的支持情况如下：

Chrome 29+

Firefox 28+

Internet Explorer 11+

Opera 17+

Safari 6.1+ (prefixed with -webkit-)

Android 4.4+

iOS 7.1+ (prefixed with -webkit-)

文中介绍的flex用法只是一小部分，flex还有着其他强大的功能。本文主要介绍水平垂直居中的方法，具体的flex教学，可以移步：图解CSS3 Flexbox属性

原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。