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

This article mainly introduces "what are the ways of Web front-end development CSS center". In daily operation, I believe that many people have doubts about the way of Web front-end development CSS center. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what is the way of Web front-end development CSS center?" Next, please follow the editor to study!

In the following centered example, the same div is used as the parent element and p as the child element

Set a div, and set the width and height frame of div, set a block element p in div, set its width, height and background color

Css Center Mode 1

Here, we use the pseudo element to center the child element p horizontally in the div box, just add the text-align:center; vertical center to its parent element div, and add a pseudo element after the parent element, and make the style inline-block;height:100%; is as high as the parent element, vertical-align:middle Vertical centering, that is, the p element is relatively centered with the pseudo element, which is equivalent to the vertical centering of the p element in the div because the pseudo element is as high as div.

Css Center Mode 2

Here, positioning is used to center.

The child element p sets position:absolute away from the document flow, and defaults to html as the parent element, so we set position:relative; for the parent element div so that p changes the position with div as the parent element, left:0;tight:0;top:0;bottom:0; (only elements with positioning can be moved in this way), and finally margin:auto; will be centered horizontally and vertically.

Css Center Mode 3

Here, the elastic box is used to center.

The parent element div is set to the elastic box style, and the justify-content:center; spindle is centered

Align-items:center; is vertically centered (and these two can only be set on the parent element, elastic box knowledge)

Css Center Mode 4

Use the upper-left corner of the location line to center, then move left to half the width of the child element, and then move up to half the height of the child element.

Css Center Mode 5

Use animation to move the attribute transform

At this point, on the "Web front-end development of CSS in the middle of the way" on the end of the study, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.