Centering elements is a problem that every front end will experience, and the methods to solve this problem are also different, each has its own advantages and disadvantages. Today, summarize the known methods and analyze the advantages and disadvantages.
Base code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Subscription publication</title> <style> .bigBox { width: 500px; height: 500px; background-color: aqua; } .smallBox { width: 100px; height: 100px; background-color: antiquewhite; } </style> </head> <body> <div class="bigBox"> <div class="smallBox"></div> </div> <script> </script> </body> </html>
Basic effect:
1. Positioning method
1.1 margin back shift method
<style> .bigBox { position: relative; width: 500px; height: 500px; background-color: aqua; } .smallBox { position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; background-color: antiquewhite; } </style>
Principle: use a simple parent-child absolute positioning method, and use left and top to control the vertical and horizontal center of the upper left corner of the child element. Then use margin top and margin left to move back the box position.
Effect display:
Defect: the above method perfectly realizes the vertical and horizontal centering of the small box in the middle of the large box, but one defect is that the width and height of the small box must be known in advance. If you don't know, you can't accurately center it. In a real project, the element style is often requested from the background, so the specific width and height of the element can not be obtained.
1.2 positioning value is 0 method
The following code is obtained by adjusting and optimizing according to the defects of the above method:
<style> .bigBox { position: relative; width: 500px; height: 500px; background-color: aqua; } .smallBox { margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100px; height: 100px; background-color: antiquewhite; } </style>
Principle: let the positioning of the small box in all four directions be 0. At this time, the small box is still in its original position. Use margin: auto to keep the outer margins of up, down, left and right consistent. Since the positioning values of the small box in four directions are 0, the small box will be automatically pulled to the middle, not the upper right corner.
Defect: Although the above method can center the display without knowing the width and height of the small box, the width and height of the small box must exist. If the width and height are not set, the full screen will be covered automatically (for the effect of four azimuth values of 0 after absolute positioning, if the width is not set, the width will be covered, if the height is not set, the height will be covered, and if none is set, the width and height will be covered).
1.3 transform: translate(-50%, -50%)
The introduction of the transform attribute of css3 finally gives an optimal solution to the method of positioning and centering.
<style> .bigBox { position: relative; width: 500px; height: 500px; background-color: aqua; } .smallBox { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; background-color: antiquewhite; transform: translate(-50%, -50%); } </style>
Principle: like the first positioning method, first position the upper left corner to the middle of the large box. Then use the translate method in the transform attribute, which indicates how many positions of its own elements are translated. translateX translates the abscissa, translateY translates the ordinate, and translate translates the abscissa and ordinate. Parameter 1 is abscissa and parameter 2 is ordinate. Use - 50% to shift half of your position to the left and up to achieve the centering effect.
Defect: because css3 is used, there is a compatibility problem, but this method is most recommended in the positioning scheme.
2.flex flow layout method
<style> .bigBox { display: flex; justify-content: center; align-items: center; width: 500px; height: 500px; background-color: aqua; } .smallBox { width: 100px; height: 100px; background-color: antiquewhite; } </style>
Principle: the flow layout of flex is also a highly recommended method to solve the layout. Directly set it to the flow layout of flex, and then let the elements in the large box be located on the x-axis and centered on the y-axis.
Defect: good things always have the same problem, that is, compatibility (in fact, compatibility can still be ignored now)
3. Table cell layout method
The least commonly used method.
<style> .bigBox { display: table-cell; width: 500px; height: 500px; text-align: center; vertical-align: middle; background-color: aqua; } .smallBox { display: inline-block; width: 100px; height: 100px; background-color: antiquewhite; } </style>
**Principle: * * this method is a centering method for text. After the parent element display is set to table cell, the internal text elements can be displayed in the center. Text align: center realizes the horizontal center of text, and vertical align: middle realizes the vertical center of text. Then set the child element as an inline element or an inline block level element.
In order to achieve the purpose of centering, it is not advisable to set elements as inline elements, which will lose the characteristics of block level elements.
3.js layout method
Universal js can also center elements. The principle is very simple. Just paste the code here.
let bigBox = document.querySelector('.bigBox') let smallBox = document.querySelector('.smallBox') let bigWidth = bigBox.clientWidth let smallWidth = smallBox.clientWidth let bigHeight = bigBox.clientHeight let smallHeight = smallBox.clientHeight smallBox.style.position = 'relative' smallBox.style.left = (bigWidth-smallWidth)/2 + 'px' smallBox.style.top = (bigHeight-smallHeight)/2 + 'px'
At present, the layout I master is about these. If there are deficiencies or errors, please supplement and correct them.