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

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

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

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 }

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 }

　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 }

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 }

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 }

　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 }

　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 }

(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 }

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 }

　Demo

法三. flex布局轻松解决

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

核心代码如下：

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

　　Demo

一些总结

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

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

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

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