Home > Developer > Web Develop
The following methods, due to the test environment for the reasons, IE series only tested IE9 and IE6, the following is said that the support of IE is relative to IE9 and IE6:
One, the horizontal vertical center of the element:
The first method:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
. M-demo {
margin:60px 0 0 100px;
width:500px;
height:500px;
border:1px solid #000000;
}
. M-demo Div {
width:200px;
height:200px;
border:1px solid #FF0000;
}
. g-bothctr-1 {
position:relative;
}
. g-bothctr-1. cnt {
Margin:auto;
Position:absolute;
left:0;
right:0;
top:0;
bottom:0;
}
</style>
<body>
<div class= "M-demo g-bothctr-1" >
<div class= "CNT" ></div>
</div>
</body>
Extensibility: The parent element has a wide height change, the child element is still centered, but the child element can only be fixed to a wide height
Compatibility: Supported by mainstream browsers, IE6 not supported
This method of vertically centering a pair of elements is well-compatible, but the disadvantage is that it requires the parent element to be positioned relative to the row, and the child element must be a fixed width and height
The second method:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
. M-demo {
margin:60px 0 0 100px;
width:500px;
height:500px;
border:1px solid #000000;
}
. M-demo Div {
width:200px;
height:200px;
border:1px solid #FF0000;
}
. g-bothctr-2 {
Text-align:center;
font-size:0;
Letter-spacing: -0.307em;
}
. G-bothctr-2:before,. g-bothctr-2. cnt {
Vertical-align:middle;
Display:inline-block;
}
. g-bothctr-2. cnt {
Letter-spacing:normal;
}
. g-bothctr-2:before {
Content: ";
width:0;
height:100%;
}
</style>
<body>
<div class= "M-demo g-bothctr-2" >
<div class= "CNT" ></div>
</div>
</body>
/*IE6, 7 does not support content properties */
Extensibility: element height changes regardless of child element or parent element, child element still centered
Compatibility: Supported by mainstream browsers, IE6 not supported
The disadvantage of this method is that the child element must be inline-block or inline elements, can not change its display:inline-block, that is, the child element can not be absolutely positioned, floating, display set to block
The third method:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
. M-demo {
margin:60px 0 0 100px;
width:500px;
height:500px;
border:1px solid #000000;
}
. M-demo Div {
width:200px;
height:200px;
border:1px solid #FF0000;
}
. g-bothctr-3 {
/* Not applicable for inclusion element float, IE6, 7 incompatible */
Display:table-cell;
Text-align:center;
Vertical-align:middle;
}
. g-bothctr-3. cnt {
Vertical-align:middle;
Display:inline-block;
}
</style>
<body>
<div class= "M-demo g-bothctr-3" >
<div class= "CNT" ></div>
</div>
</body>
Extensibility: element height changes regardless of child element or parent element, child element still centered
Ie6\7 incompatible due to display:table-cell reasons
This method extensibility is also possible, but neither the parent element nor the child element can float, and if the parent element floats, the element can only be horizontally centered, and if the child element floats, the child elements go in a floating direction
The fourth method:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
. M-demo {
height:300px; /* Height value must not be less */
width:300px; /* Width value must not be less */
border:1px solid #000000;
}
. g-bothctr-4 {
display:table;
position:relative;
Float:left; /* Do not float or float */
}
. g-bothctr-4. TableCell {
Display:table-cell;
Vertical-align:middle;
Text-align:center;
*position:absolute;
*top:50%;
*left:50%;
}
. g-bothctr-4. cnt {
Vertical-align:center;
Display:inline-block;
*position:relative;
*top:-50%;
*left:-50%;
}
*/* Note that using this method, if your center element is placed in the body, you need to set a "height:100%" property for Html,body. */
</style>
<body>
<div class= "M-demo g-bothctr-4" >
<div class= "TableCell" >
<div class= "CNT" >content</div>
</div>
</div>
</body>
Compatibility: Compatible with IE6
Extensibility: High bitterness can be extended regardless of child element or parent element
This method is more than the previous method of a simulation table of the box Div, the above is directly Table-cell, so this is to support the outermost parent element floating.
The implementation of this principle, is to let the outermost element of a display:table simulation table, and then let the content element of the immediate parent element is the outermost parent element of the next level of a display:table-cell, let it simulate the behavior of table cells, combined with text-align: Center and Vertical-align:middle combine child elements Display:inline-block let its child elements that is content element horizontal vertical Center, and then Ie6\7 does not support Table-cell what to do, method is for ie6\ 7 gives the immediate parent element of the content element a position:absolute,left:50%,top:50%, so that it is absolutely positioned horizontally and vertically offset 50% relative to the outermost parent, and this time its left is aligned with the parent element's vertical baseline, Then the content element is position:relative,left:-50%,top:-50%, and the content element is shifted from its immediate parent element to the left and the top of its immediate parent element, and the content elements are centered relative to the outermost parent element.
Why a total of three layers of labels is required, one is the need to build table and Table-cell. Second, in order to be able to better on the ie6\7 using the above positioning principle to center. Double benefit, this method can be well understood
The Fifth method:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
. M-demo {
margin:50px;
width:600px;
height:600px;
border:1px solid #000000;
}
. M-demo. Secont {
width:200px;
height:200px;
Background-color: #FF0000;
}
. g-horctrhtml-1 {
Text-align:center;
font-size:0;
Letter-spacing: -0.307em;
*letter-spacing:normal;
*word-spacing: -1px;
}
. g-horctrhtml-1. Empty {
width:100%;
height:50%;
Margin-bottom: -100px; /* Configuration parameters, half the height of the content element */
}
. g-horctrhtml-1. cnt {
Display:inline-block;
*letter-spacing:normal;
*word-spacing:normal;
*display:inline;
*zoom:1;
}
</style>
<body>
<div class= "M-demo g-horctrhtml-1" >
<div class= "Empty" ><!--empty content--></div>
<div class= "Secont cnt" > Actual content </div>
</div>
</body>
Compatibility: Mainstream browsers, including IE6, are compatible
Extensibility: aspect are not extensible
This method, although a layer of labels, but good compatibility, if the project needs to be compatible with IE6\7, you can consider using this method
The Sixth method:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
. M-demo {
margin:50px;
width:600px;
height:600px;
border:1px solid #000000;
}
. M-demo. Secont {
width:200px;
height:200px;
Background-color: #FF0000;
}
. g-horctrhtml-1 {
Text-align:center;
font-size:0;
Letter-spacing: -0.307em;
}
. g-horctrhtml-1:before {
Content: "";
Display:block;
width:100%;
height:50%;
Margin-bottom: -100px; /* Configuration parameters, half the height of the content element */
}
. g-horctrhtml-1. cnt {
Display:inline-block;
Letter-spacing:normal;
}
</style>
<body>
<div class= "M-demo g-horctrhtml-1" >
<div class= "Secont cnt" ></div>
</div>
</body>
Compatibility: Incompatible ie6\7
Extensibility: aspect are not extensible
This method is just the after pseudo-element version of the method above, replacing the empty tag with the content loaded with the after pseudo-element, eliminating the need for compatible ie6\7 and removing those hack code
Other methods:
1, by giving the content element one (containing the total width of the element minus the total width of the content element) half of the margin-left and by giving the content element one (containing the total height of the element minus the total height of the picture) half of the Margin-top way to center.
2, by giving the parent element a padding value up and down, but the disadvantage is that the parent element cannot fix the height.
3. jquery or JS method
4, Horizontal center: margin:0 Auto; However, if your Web page is not explicitly declared "! DOCTYPE ", then the Internet Explorer will also be in the weird mode of parsing your Web page, the above method will not be able to get your page to be horizontally centered, but you can use the following methods to solve the bug.
Body {
text-align:center;/* implement IE in weird Mode page Horizontal Center */
}
. container {
text-align:left;/* to restore text to left alignment */
width:960px;/* Set Page Total width */
margin:0 auto;/* to center the page horizontally
}
5, using negative general element width margin with absolute positioning left:50% to achieve horizontal centering
6, using negative general element height margin with absolute positioning top:50% to achieve vertical centering
Second, only the horizontal center method:
The first method (in addition to being able to center, can also reside left, right):
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
. M-demo {
margin:50px;
width:400px;
height:400px;
border:1px solid #000000;
}
. M-demo. cnt {
width:150px;
height:150px;
Background-color: #FF0000;
}
. g-hrilft-3,. g-hrictr-3,. g-hrirt-outer-3,. g-hrirt-inset-3 {
font-size:0;
Letter-spacing: -0.307em;
}
. G-hrilft-3:before,. G-hrictr-3:before,. G-hrirt-outer-3:before,. G-hrirt-inset-3:before {
Content: ' ';
font-size:0;
}
. g-hrilft-3 cnt,. g-hrictr-3. CNT,. g-hrirt-outer-3. CNT,. g-hrirt-inset-3. cnt {
Display:inline-block;
Position:absolute;
Letter-spacing:normal;
}
. g-hrictr-3. cnt {
-webkit-transform:translatex (-50%);
-moz-transform:translatex (-50%);
-ms-transform:translatex (-50%);
-o-transform:translatex (-50%);
Transform:translatex (-50%);
}
. g-hrirt-inset-3 {
Text-align:right;
Direction:rtl;
}
. g-hrirt-outer-3 {
Text-align:right;
}
. g-hrictr-3 {
Text-align:center;
}
. g-hrilft-3 {
Text-align:left;
}
</style>
<body>
<div class= "M-demo g-hrirt-outer-3" >
<div class= "CNT" ></div>
</div>
</body>
This method specific explanation see Zhang Xin Xu Blog: http://www.zhangxinxu.com/wordpress/2011/12/position-absolute-text-align-center/, there are a lot of details do not understand, I'll take the time to study it properly.
The second method:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
Body {
margin:0;
}
. m-demo-2 {
margin:50px 0 50px 0;
width:100%;
height:48px;
outline:1px solid #000000;
}
. m-demo-2. W Div {
padding:20px;
Background-color: #FF0000;
margin-left:5px;
}
. g-hrictr-1 {
Overflow:hidden;
}
. g-hrictr-1:after {
/* page list for horizontal centering */
Content: ".";
Clear:both;
Display:block;
width:0;
height:0;
Overflow:hidden;
Visibility:hidden;
}
. g-hrictr-1. G-ctr-w,
. g-hrictr-1. G-item {
Float:left;
Display:inline;
position:relative;
}
. g-hrictr-1. g-ctr-w {
left:50%;
}
. g-hrictr-1. G-item {
right:50%;
}
</style>
<body>
<div class= "M-demo-2 g-hrictr-1" >
<div class= "G-ctr-w W" >
<div class= "G-item" style= "margin-left:0;" ></div>
<div class= "G-item" ></div>
<div class= "G-item" ></div>
<div class= "G-item" ></div>
<div class= "G-item" ></div>
</div>
</div>
</body>
Compatibility: Mainstream browsers, including IE6 browsers, are compatible
Extensibility: The number and size of child elements are extensible, and the aspect of parent elements can be extended.
This method of implementation of the principle a little bit around the brain, but also good, not difficult to understand, not tablets, direct text interpretation:
First, give G-ctr-w and G-item a float:left, so that the width of g-ctr-w and G-item can be contracted, so that their size and shape is not followed by the aspect of the elements to go, Instead of padding the layout properties except width and height, the aspect of the element after float can be shrunk, and at the same time, the outermost parent element is cleared floating, this does not explain, this time, G-ctr-w and G-item all run to the outermost parent element g-hrictr-1 the leftmost, next look, how to give a floating element center, in fact, the use of the previous method inside some principles, First give g-ctr-w and G-item a position:relative, and then give G-ctr-w left set to 50%, that is, relative to the outermost parent element g-hrictr-1 to the right offset g-hrictr half the width of the displacement, At this point, the left side of the g-ctr-w is aligned with the perpendicular bisector of the outermost parent element g-hrictr-1, so what is needed now is to have the g-ctr-w offset a distance to the left so that G-ctr-w appears to align horizontally with the outermost parent element g-hrictr-1. Obviously the distance you need to move is half its width, but you can rack your brains to think that whether or not a fixed percentage value is g-ctr-w always centered, however, there are ways that we can give all elements of g-item the left offset to 50% of the width of its parent element. That is, right:50% or left:-50%, which is used right:50%, so that it looks like g-ctr-w is aligned relative to the outermost parent element g-hrictr-1 Horizontal Center.
Then, the number of aspect and child elements is extensible, but when the width of the g-ctr-w is larger than half the width of the g-hrictr-1, the parent element of the g-hrictr-1 is beyond the part of the display scroll bar, then the scroll bar appears, so here, Give G-hrictr-1 a Overflow:hidden, will overflow the space to hide, and G-ctr-w's content width (including margin) is larger than g-hrictr-1 width, then the child element G-item will be squeezed down.
It's also a good way.
The third method:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
Body {
margin:0;
}
. m-demo-2 {
margin:50px 0 50px 0;
width:100%;
height:48px;
outline:1px solid #000000;
}
. m-demo-2. W Div {
padding:20px;
Background-color: #FF0000;
margin-left:5px;
}
. g-hrictr-2 {
position:relative;
}
. g-hrictr-2. g-ctr-w {
Position:absolute;
left:50%;
}
. g-hrictr-2. g-ctr-w. G-item {
Float:left;
position:relative;
right:50%;
}
</style>
<body>
<div class= "M-demo-2 g-hrictr-2" >
<div class= "G-ctr-w W" >
<div class= "G-item" style= "margin-left:0;" ></div>
<div class= "G-item" ></div>
<div class= "G-item" ></div>
<div class= "G-item" ></div>
<div class= "G-item" ></div>
</div>
</div>
</body>
Compatibility: Mainstream browsers, including IE6, are compatible
Extensibility: The content element aspect, the number is extensible, but the content element parent container. G-ctr-w can only accommodate the outermost. Half the width of the g-hrictr-2, otherwise the content element will be squeezed out
The fourth method:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
Body {
margin:0;
}
. M-demo {
margin:30px;
width:400px;
height:400px;
border:1px solid #000000;
}
. M-demo Div {
width:150px;
height:150px;
Background-color: #FF0000;
}
. g-hrictrflex-1 {
Display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
Display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
Display:-o-box;
-o-box-orient:horizontal;
-o-box-pack:center;
Display:-ms-box;
-ms-box-orient:horizontal;
-ms-box-pack:center;
Display:box;
Box-orient:horizontal;
Box-pack:center;
}
</style>
<body>
<div class= "M-demo g-hrictrflex-1" >
<div></div>
</div>
</body>
Due to the use of CSS3 Flex, it is poorly compatible and only considered on the phone side
Aspect extensible
The Fifth method:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
Body {
margin:0;
}
. m-demo-2 {
margin:50px 0 50px 0;
width:100%;
height:48px;
outline:1px solid #000000;
}
. m-demo-2. W Div {
padding:20px;
Background-color: #FF0000;
margin-left:5px;
font-size:18px;
}
. g-horctrcss3fitcotent {
Width:-moz-fit-content;
Width:-webkit-fit-content;
Width:fit-content;
Margin-left:auto;
Margin-right:auto;
font-size:0;
Letter-spacing: -0.307em;
}
. g-horctrcss3fitcotent. G-item {
Display:inline-block;
Letter-spacing:normal;
}
</style>
<body>
<div class= "M-demo-2 g-hrictr-1" >
<div class= "W g-horctrcss3fitcotent" >
<div class= "G-item" style= "margin-left:0;" > Front-End Engineers </div>
<div class= "G-item" > Front-end engineer </div>
<div class= "G-item" > Front-end engineer </div>
<div class= "G-item" > Front-end engineer </div>
<div class= "G-item" > Front end engineer Front end engineer </div>
</div>
</div>
</body>
The use of CSS3, poor compatibility, only consider using the mobile phone side
Sub-element height-width extendable
CSS Elements Horizontal Vertical Center method Summary (methods mainly from the desert and Zhang Xin Xu blog)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
