Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use CSS to achieve the center alignment of the elements in the elastic box", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use CSS to achieve the center alignment of the elements in the elastic box" this article.

The code example is as follows:

# xyz {

Width:200px

Height:250px

Border:1pxsolidblack

Display:-webkit-flex;/*Safari*/

-webkit-align-items:center;/*Safari7.0+*/

Display:flex

Align-items:center

}

# xyzdiv {

-webkit-flex:1;/*Safari6.1+*/

Flex:1

}

Content 1

The contents of some files

Content 2

The effect is as follows:

Or change the width width to 400px and background color content, and the effect is as follows:

In the above code, we first use the display:flex; property to make the box have the property of flexible layout.

The align-items property defines the alignment of flex subitems in the direction of the side axis (vertical axis) of the current row of the flex container.

The flex property is used to set or retrieve how the child elements of the elastic box model object allocate space.

Setting the flex property value to 1 means that all the child elements of the elastic box model object have the same length.

Setting the align-items property value to center indicates that the element is in the center of the container. The elastic box element is centered on the side axis (longitudinal axis) of the row. (if the size of the row is less than the size of the elastic box element, it overflows the same length in both directions.)

The above is all the content of the article "how to use CSS to achieve the center alignment of elements in the elastic box". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.