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

This article mainly shows you "css how to use Flexbox in the Div", 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 "css how to use Flexbox in the middle of Div" this article.

Use Flexbox to center Div

We have used the location project to center the project. But now we have solved a classic problem, using flexbox to center div. To do this, let's take a look at the following example:

.center {display: flex; align-items: center; justify-content: center;}. Center div {width: 100px; height: 100px; border-radius: 50%; background: # b8b7cd;}

First, we need to make sure that the parent container holds a circle, that is, flex-container. In it, we have a simple div to make our circle. We need to use the following important attributes related to flexbox:

Display: flex; this ensures that the parent container has an flexbox layout.

Align-items: center; this ensures that the flex subitem is aligned with the center of the horizontal axis.

Justify-content: center; this ensures that the flex subkey is aligned with the center of the principal axis.

The above is all the content of the article "how css uses Flexbox to center Div". 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.