Centering in CSS can be divided into Horizontal Center and Vertical Center. Horizontal centering can be divided into two cases: in-line element centered and block element centered, while block element is divided into fixed-width block element centered And Indefinitely wide block elements are centered. These situations are described in detail below.
1. Horizontally centered
1. Inline elements are centered
As the name implies, inline elements are centered only for inline elements, such as Inline elements such as text, images, and buttons can be achieved by setting text-align:center to the parent element. In addition, this method can also be used if the block element attribute display is set to inline. But there is a first condition that the child elements must not be affected by float, otherwise everything is useless.
.div1{
text-align:center;
}
Hello world
2, the block element is centered
( 1), the fixed-width block element is centered
Elements that meet the two conditions of fixed-width (the width of the block-shaped element is a fixed value) and the block-shaped element can be set by setting the “left and right margin” value to “auto” To achieve centering.
.div1{
width:200px;
border:1px solid red;
margin:0 auto;
}
Hello world
(2), the variable width block element is centered
In actual work, we will encounter the need to set the center for “block elements with variable width”, such as page navigation on a web page. Because the number of pages is uncertain, we cannot limit it by setting the width elasticity. (Indefinite width block element: The width of the block element is not fixed.)
There are three ways to center the indefinite width block element:
Method 1:
Add the element to be displayed to the table tag, and then set the “left and right margin” value for the table tag to “auto” to achieve centering; or use display: table; then set the “left and right margin” value of the element to “auto” “To achieve centering. The latter display: table; method will be more concise.
Why add the table tag? It uses the length adaptability of the table tag—that is, it does not define its length nor defaults to the length of the parent element body (the length of the table is determined by the length of the text inside), so It can be regarded as a fixed-width block element, and then use the margin method of the fixed-width block to center it horizontally.
The following example:
table{
margin:0 auto;
}
- Hello world
- Hello world
.wrap{
background:#ccc;
display:table;
margin:0 auto;
}
Hello world
Method 2:
Change the display of the block-level element to the inline type (set to the inline element display), and then Use text-align:center to achieve the centering effect.
The advantage of this method over the first method is that it does not need to add non-semantic tags, but there are also some problems: it changes the display type of the block element to inline, which becomes an inline element. Therefore, some functions are missing, such as setting the length value (becoming inline-block to set the width and height).
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline; //Why does this sentence have the same effect when used or not?
}
- Hello world
- Hello world
Method 3:
By setting float to the parent element, and then setting position: relative and left to the parent element: 50%, set position: relative and left: -50% for the child element to achieve horizontal centering.
.wrap{
float:left;
position:relative;
left:50%;
clear:both;
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
Hello world
First set the parent element wrap to clear the float, and then float to the left. Position the wrap 50% to the right. Then define the child element to be offset 50% to the left relative to the parent element. Break away from the parent element. Add a border to make it clearer. In addition, absolute positioning is also possible.
Second, vertical centering
Vertical centering can be divided into single-line text determined by the height of the parent element, and multi-line text determined by the height of the parent element.
1. The vertical centering method of a single line of text determined by the height of the parent element is achieved by setting the height of the parent element to be consistent with the line-height. (height: the height of the element, line-height: as the name implies, line height, refers to the distance between the baselines between lines in the text).
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
Hello world
2. Multi-line text with the height of the parent element determined
There are two methods:
Method 1:
Use insert table (including tbody, tr, td) tags, and set vertical-align: middle.
.wrap{
height:300px;
background:#ccc;
vertical-align:middle; /* The td tag has vertical-align set to middle by default by default, so there is no need to explicitly set it */
}
|
Hello world Hello world Hello world |
.wrap{
background:#ccc;
display:table;
vertical-align:middle;
}
Hello world
Hello world
Hello world
Method 2:
Set the display of block-level elements to table-cell (set to table cell display), Activate the vertical-align attribute. However, this method has poor compatibility, and IE6 and 7 do not support this style.
.wrap{
height:300px;
background:#ccc;
display:table-cell;/*IE8 and above and Chrome, Firefox*/
vertical-align:middle;/*IE8 and above and Chrome, Firefox*/
}
Hello world
Hello world
Hello world
.div1{
text-align:center;
}
Hello world
.div1{
width:200px;
border:1px solid red ;
margin:0 auto;
}
Hello world
table{
margin:0 auto;
}
- Hello world
- Hello world
.wrap{
background:#ccc;
display:table;
margin:0 auto;
}
Hello world
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline; //Why does this sentence have the same effect when used or not?
}
- Hello world
- Hello world
.wrap{
float:left;
position:relative;
left:50%;
clear:both;
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
Hello world
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
Hello world
.wrap{
height:300px;
background:#ccc;
vertical-align:middle; /* The td tag has vertical-align set to middle by default by default, so there is no need to explicitly set it */
}
|
Hello world Hello world Hello world |
.wrap{
background:#ccc;
display:table;
vertical-align:middle;
}
Hello world
Hello world
Hello world
.wrap{
height:300px;
background:#ccc;
display:table-cell;/*IE8 and above and Chrome, Firefox*/
vertical-align:middle;/*IE8 and above and Chrome, Firefox*/
}
Hello world
Hello world
Hello world
