[Front-end strategy] The most comprehensive horizontal vertical center solution, flexbox layout, and flexbox Layout

[Front-end strategy] The most comprehensive horizontal vertical center solution, flexbox layout, and flexbox Layout

Recently, many vertical center problems have been encountered. This is a very common problem in Css layout, such as vertical center of various containers with fixed length, fixed width, or fixed width, in fact, there are many solutions. In addition, the emergence of flexbox in Css3 makes it easier to solve various center problems. I found many articles about flexbox in the search garden and thought it was not detailed enough. So I would like to introduce flexbox and summarize various vertical center methods.

From simplified to traditional:

Horizontal center of element in the row

To horizontally center the elements (such as <span> and <a>) in the row, you only need to wrap the row elements in the block-level parent layer elements (<div>, <li>, <p>, and so on), and set the following in the parent Layer Element CSS:

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

It is also applicable to text, links, and inline, inline-block, inline-table, and inline-flex.

Demo

 

Horizontal center of block elements

To realize horizontal center of a block element (display: block), we only need to set its left and right margin-left and margin-right to auto to center the block element, the CSS settings of the block element to be horizontally centered are as follows:

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

Demo

 

Horizontal center of multiple block elements

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

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

Demo

 

Use flexbox to horizontally center multiple block elements

Before using it, first introduceFlexbox.

The Flexible Box module is designed to provide a more effective way to develop, adjust, and distribute project la s in a container, even if their sizes are 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 + have supported Flexbox described in this article.

　　

Learn to use flexbox

To set the flexbox layout for the element, set the display property value to flex.

1 #container {2     display: flex;3 }

 

Flexbox is a block-level element by default. If it needs to be defined as a row-level element, likewise:

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

 

Flexbox consists of scaling containers and scaling projects. You can set the display attribute of an element to flex or inline-flex to get a scaling container. The Container set to flex is rendered as a block-level element, while the container set to inline-flex is rendered as a line element. For each container that is set as flex, its internal elements will become a flex project, that is, a scaling project. To put it simply, flex defines how to layout a scaling project in a scaling container.

Back to the topic, use flexbox to realize horizontal center of Multi-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 vertical center of known height and width Elements

Method 1.

Absolute positioning and negative margin.

With absolute positioning, the top and left attributes of the element are set to 50%, and the margin is used to pull the element back to the half of its height and width to implement vertical center. 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 does not 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)

Demo

 

Horizontal vertical center of unknown height and width Elements

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

When the element to be centered is inline or inline-block, You Can skillfully set the parent-level container to display: table-cell, with text-align: center and vertical-align: middle enables horizontal and vertical center.

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 explicit power

With Css3 transform, the vertical center of elements can be easily implemented with the height and width of unknown elements.

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

 

Method 3. Flexible Layout

With the flex layout, you can easily align the elements horizontally and vertically without having to absolutely position and change the layout.

The core code is as follows:

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

Demo

 

Summary

The transform and flex of CSS3 are certainly easy to use, but compatibility issues must be considered in the actual application of the project. A large amount of hack code may lead to a loss worth the candle.

Some browsers still need to use the prefix:

1. flexboxtest {2 display: flex; 3 display:-webkit-flex; // Safari still needs to use a specific browser prefix 4}

　　

The browser supports flexbox in the latest version as follows:

• Chrome 29 +
• Firefox 28 +
• Internet Explorer 11 +
• Opera 17 +
• Safari 6.1 + (prefixed with-webkit -)
• Android 4.4 +
• IOS 7.1 + (prefixed with-webkit -)

　　

The flex usage described in this article is only a small part. flex also has other powerful functions. This article mainly introduces the method of horizontal and vertical center. The actual flex teaching can be moved: the CSS 3 Flexbox attribute is illustrated.

 

The original article is limited in writing, so it is easy to learn. If there is anything wrong with the article, please let us know.