First, line-level elements are aligned horizontally (parent element set Text-align:center)
- <div style="width:200px; height:100px;border:1px Solid;text-align:center; " >
- <span> row-level elements vertically centered </span>
- </div>
Second, block-level element horizontal center alignment (margin:0 Auto)
[HTML]View Plain copy
- <div style="width:200px; height:100px;border:1px Solid;text-align:center; " >
- <div style="border:1px solid red;margin:0 auto;height:50px;width:80px;" > block-level elements horizontally centered </div>
- </div>
Three, let the absolute positioning of the elements horizontally center alignment
[CSS]View Plain copy
- . center{
- position: absolute; / * Absolute positioning * /
- width: 500px;
- height:300px;
- background: red;
- margin: 0 Auto; / * Horizontal Center * /
- Left: 0; / * cannot be omitted here, and is 0*/
- Right: 0; / * cannot be omitted here, and is 0*/
- }
Experience Sharing:The main properties of horizontal centering are
1. Text-alin:center;
2. margin:0 Auto
3. Position:relative|absolute; left:50%;
Html+css centering problem