The element is centered, and the element inside the div is centered.

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;