Program Ideas:Horizontal centering setting
1. Inline elements
Set Text-align:center
2, fixed wide block elements
Set left margin value to auto
3. Variable width block element
A: Add a table tag outside the element (complete, including table, TBODY, TR, TD), the element is written in TD, then set the value of margin to auto
B: Set the Displa:inine method for this element
C: Parent elements set position:relative and left:50%, child elements set position:relative and left:50% vertical centering settings
1. Single-line text with parent element height determination
Set height = Line-height
2. Multi-line text with parent element height determination
A: Insert Table (insert method and horizontal center), then set Vertical-align:middle
B: Set Display:table-cell and set Vertical-align:middle first
Code implementation:
1, using Position:absolute, set the properties of left, top, Margin-left, Margin-top
. one{
Position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
}
This method is compatible with basic browsers, and the disadvantage is that it requires a fixed width and height. 2, using position:fixed, also set the left, top, Margin-left, Margin-top properties
. two{
position:fixed;
width:180px;
height:180px;
top:50%;
left:50%;
margin-top:-90px;
margin-left:-90px;
Background:orange;
}
We all know that Position:fixed,ie is not supported by this property.
3, using the position:fixed attribute, Margin:auto this don't forget
. three{
position:fixed;
width:160px;
height:160px;
top:0;
right:0;
bottom:0;
left:0;
Margin:auto;
Background:pink;
}
4, using the Position:absolute property, set the Top/bottom/right/left
. four{
Position:absolute;
width:140px;
height:140px;
top:0;
right:0;
bottom:0;
left:0;
Margin:auto;
Background:black;
}
5, use the Display:table-cell property to center the content vertically
. five{
Display:table-cell;
Vertical-align:middle;
Text-align:center;
width:120px;
height:120px;
Background:purple;
}
6, the simplest way to center inline elements, using the Line-height property
. six{
width:100px;
height:100px;
line-height:100px;
Text-align:center;
Background:gray;
}
This method is also useful, such as aligning the text vertically to the center
7, use CSS3 's Display:-webkit-box property, and then set-webkit-box-pack:center/-webkit-box-align:center
. seven{
width:90px;
height:90px;
Display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
Background:yellow;
Color:black;
}
8, using CSS3 's new attribute transform:translate (x, Y) property
. eight{
Position:absolute;
width:80px;
height:80px;
top:50%;
left:50%;
Transform:translate ( -50%,-50%);
-webkit-transform:translate ( -50%,-50%);
-moz-transform:translate ( -50%,-50%);
-ms-transform:translate ( -50%,-50%);
Background:green;
}
This method can not need to set the fixed width of the high, on the mobile side will be more, on the mobile side CSS3 compatible better
9. One of the largest, using: Before elements
. nine{
position:fixed;
Display:block;
top:0;
right:0;
bottom:0;
left:0;
Text-align:center;
Background:rgba (0,0,0,.5);
}
. nine:before{
Content: ";
Display:inline-block;
Vertical-align:middle;
height:100%;
}
. Nine. content{
Display:inline-block;
Vertical-align:middle;
width:60px;
height:60px;
line-height:60px;
color:red;
Background:yellow;
}
CSS Centering method
