How to use css flex to realize Vertical centering

This article mainly introduces how to use css flex to achieve vertical centering, the article is very detailed, has a certain reference value, interested friends must read!

Apply flex to achieve vertical centering

Exercise css flex to complete vertical centering. Flex generics are not the best decision to implement vertical centering, as IE 8,9 does not support it.

Then, to achieve vertical centering with flex, we first need to create a div element that wraps around the image, and then define some basic background attributes for it.

The following image img has a width of 100px and a height of 100px.

HTML code section:

A small piece of CSS code:

body{ background:#999}.flexbox{width: 300px; height: 250px; bac kg round:#fff; display: flex; align-items: center}.flexbox img{width: 100px; height: 100px; align-items: center;}

Results:

Reader running attainments: complete picture vertically centered organization

Express:

1, in order to complete the vertical centering with flex, we first have to set up a div element wrapped around the image, and then define some root attributes for it.

2. The div element's display attribute is configured as flex.

3, div Add another attribute align-items: center;

The above is "how to use css flex to achieve vertical centering" all the content of this article, thank you for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!