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

The content of this article mainly revolves around css3 how to center the box horizontally. The content of the article is clear and clear. It is very suitable for beginners to learn and is worth reading. Interested friends can follow the editor to read together. I hope you can get something through this article!

Css3 to make the box horizontal center method: 1, use the margin attribute, add "margin: 0 auto;" style to the box element can be horizontal center; 2, the use of flex elastic layout to achieve horizontal center; 3, the use of position and transform attributes to achieve horizontal center.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

How to center the box horizontally is a very common interview question in CSS. The box is centered relative to the parent element, so when we center the box, we often use a nested way to let the parent box wrap the child box.

The way to center the child box under the nesting of the father-son box:

The first method: margin: 0 auto, using borders, but the use of margin will affect the use of other boxes, so it is not recommended.

The second method: position, using positioning, child absolute father phase, and then left:50%,margin-left: half the width of the negative box, which is the most commonly used method.

The third method: flex, flexible layout, center the child box, but the style should be written in the parent box, display:flex,just-content:center

The fourth method: on the basis of position, replace margin-left with transform:translate (- 50px) in CSS3

The fifth method: on the basis of position, only the absolute father phase is retained, and then margin:auto, left:0 and right:0 are added to the subbox.

Add: in the fifth method, add top:0,bottom:0, you can achieve vertical and horizontal center

# father {width: 400px; height: 200px; border: 3px solid pink;} # son {width: 100px; height: 100px; border: 2px solid red;}

Using margin to achieve horizontal centering:

# father {width: 400px; height: 200px; border: 3px solid pink; margin: 30px auto;/* centers the parent element relative to body * /} # son {width: 100px; height: 100px; border: 2px solid red; margin: 0 auto;/* centers the child element relative to father * /}

Use positioning, paternal phase, and then left:50%,margin-left: half the width of the negative box:

# father {width: 400px; height: 200px; border: 3px solid pink; margin: 0 auto; position: relative;} # son {width: 100px; height: 100px; border: 2px solid red; position: absolute; left: 50%; margin-left:-50px;}

Flex, flexible layout, center the child box, but write the style in the parent box:

# father {width: 400px; height: 200px; border: 3px solid pink; margin: 0 auto; display: flex; justify-content: center;} # son {width: 100px; height: 100px; border: 2px solid red;}

On the basis of position, only the absolute father phase is retained, and then margin:auto, left:0, right:0 are added to the child box:

# father {width: 400px; height: 200px; border: 3px solid pink; margin: 0 auto; position: relative;} # son {width: 100px; height: 100px; border: 2px solid red; position: absolute; margin: auto; left: 0; right: 0;}

The above methods can achieve the level of the box in the middle, if you have other excellent (strange) show (work) methods, welcome to exchange duck!

The fifth way to add: coupled with top:0,bottom:0 can achieve horizontal and vertical center:

# father {width: 400px; height: 200px; border: 3px solid pink; margin: 0 auto; position: relative;} # son {width: 100px; height: 100px; border: 2px solid red; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0;}

What is csscss is a computer language used to express file styles such as HTML or XML. It is mainly used to design the style of the web page and make the web page more beautiful. It is also a language that defines style structures such as fonts, colors, locations, etc., and css styles can be stored directly in HTML pages or separate style sheet files, while the priority of style rules is determined by css according to this hierarchical structure, so as to achieve cascading effect. Up to now, css can not only decorate the web page, but also cooperate with various scripts to format the web page.

Thank you for your reading. I believe you have a certain understanding of "how to center the box horizontally in css3". Go ahead and practice it. If you want to know more about it, you can follow the website! The editor will continue to bring you better 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.