Table of contents
2. How to center the box model
The second positioning method:
3. Use table attributes to achieve inline element positioning
1. Center the text content
The text content in the box is centered, horizontally centered text-align:center; vertically centered line-height: box height; in this way, the text can be displayed centered in the container.
2. How to center the box model
2.1 Use flex layout, so that the child box can be displayed horizontally and vertically in the center of the parent box.
Use flex layout for the parent box, and then let the flex elements arrange justify-content: center to the midpoint of each row; finally, center the content in the box on the side axis align-item: center;.
2.2 Use positioning plus image transformation to achieve horizontal and vertical centering of sub-boxes.
The first positioning method:
First of all, it is necessary to perform relative positioning on the parent box, and then absolutely position the child box (the child is separated from the father). After the sub-box is absolutely positioned, the distance from the left side and the top side are set to 50%. Here, the reason for writing this is because we need to consider how wide the parent box is, how big the sub-box is, and then calculate the distance. 50% here refers to 50% of the width and height of the parent box. I marked two points on the picture, the black point indicates the current position of the box, and the red point indicates the point where the box will be if it is displayed horizontally and vertically. So we need to move the sub-box to the left and up by half the width and height of the sub-box . So here we use transform: translate(-50%, -50%); let the child box move half of its own width and height horizontally and vertically. This achieves the effect of centering the sub-box horizontally and vertically. It is emphasized here that the child box must have width and height
The second positioning method:
Similar to the first method, you first need to perform relative positioning on the parent box, and then absolutely position the child box (the child must look like the father). The difference here is that instead of transforming the graphics, we use the negative margin of the sub-box to return it to the position of the center point. The negative value of the margin is half the width and height. This achieves the effect of centering the sub-box horizontally and vertically. It is emphasized here that the child box must have width and height
The third positioning method:
How to understand this way. First of all, it is necessary to perform relative positioning on the parent box, and then absolutely position the child box (the child is separated from the father). Here we can understand that in the absence of the last statement margin: auto;, we tie a rope to each side of the child box towards each side of the parent box in the corresponding direction, and when margin: auto; is not given , The four ropes are in a very loose state, plus margin: auto; the ropes are immediately tightened. This achieves the effect of centering the sub-box horizontally and vertically. It is emphasized here that the child box must have width and height.
3. Use table attributes to achieve inline element positioning
How to understand this way. Our vertical-align:center; is used to specify the centering of inline elements or table elements, then we let the display attribute of the parent box become a table, and then let the display attribute of the inline element of the child element become a table element, so that we can You can use vertical-align:center; for table elements to achieve vertical centering effect, and then use text-align:center; to achieve text centering in the horizontal direction. This achieves the effect of centering the sub-box horizontally and vertically.
The above are some ways to achieve horizontal and vertical centering of text content, sub-boxes and some inline elements. Anyone who is interested can give it a try. The simplest and most commonly used method when using flex layout for box parts.