How to use Flex layout multiline multiple div horizontal vertical Center

Horizontal vertical has always been a classic problem, recently wrote a page style encountered this problem, this time need to horizontal vertical center is more than multiple lines of P block, the code is as follows:

<p class= "Content" >    <p class= "chart" ></p>   <p class= "chart" ></p>   <p class= "Chart" ></p>   <p class= "chart" ></p>   <p class= "Chart" ></p>   < P class= "Chart" ></p> </p>

This time using the flex layout, because the browser will help us calculate the flex layout, where the parent element needs to be flex layout, there will be a main axis and a vertical intersection in the flex layout, the spindle is horizontally oriented by default, the intersection axis is vertically oriented, Can be changed through the Flex-direction property, the specific flex layout can refer to Nanyi Teacher's tutorial: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlcss

The CSS code is as follows:

. content {    Display:flex;    Flex-wrap:wrap;    Align-items:center;    width:100%;    height:100%;  }

The Flex-wrap property refers to whether the elements under the flex layout need to be wrapped, and this property altogether has a total of three values, respectively, Nowrap,wrap,wrap-reverse. The default value is Nowwrap (no wrapping), wrap refers to the child element wrapping, and the first line is above, wrap-reverse refers to the child element wrapping, the first line below.

The Align-items property defines how the item is aligned on the intersection axis, where the default direction of the cross axis is vertical, and the value we select Center, which is aligned with the midpoint of the cross axis, has the following values:

Flex-start: The start alignment of the intersection axis. Flex-end: The end alignment of the intersection axis. Center: The midpoint alignment of the intersection axis. Baseline: The baseline alignment of the first line of text for the item. Stretch (default): If the item is not set to height or auto, it fills the height of the entire container.

This allows us to achieve vertical centering and also to center horizontally.

The style code for child elements that need to be centered vertically is as follows:

. chart {      display:inline-block;      width:30%;    height:40%;     margin:0 Auto;     border:1px solid #000;   }

Display:inline-block in order for p to display the same line, the width and height here determine how many p blocks a row can display.

Margin:0 Auto is to let the sub-elements horizontally centered, auto is the automatic meaning, the browser will help us to calculate, so we reached the horizontal vertical center.