The element is centered, and the element inside the div is centered.
1. horizontal center of row Elements
Text-align: center;
2. Vertical center of Line Elements
Height: 40px; line-height: 40px; make these two values equal
Iii. horizontal center of block-level elements
Width: 300px;Margin: 0 auto;You can choose not to set the height.
3. Vertical center of block-level elements
1. fixed width and height block level vertical center of Elements
div{ width: 200px;height: 100px;line-height: 100px;border: 1px solid #000;text-align: center;position: absolute;left: 50%;top: 50%; margin-left: -100px;margin-top: -50px; }
2. width and height are percentages of block-level elements vertically centered
div{ width: 10%;height: 30%;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;
}
3. Vertical center of unfixed block-level elements with width and height
Div {transform: translate (-50%,-50%);/* The percentage at this time is based on its own width and height * // * width: 1500px; height: 300px; * // * width: 300px; */width: 30%; height: auto;