Unknown height div compatible with each browser vertical center effect:
It is not as simple to have a div centered vertically with its parent as to have the div centered horizontally in the parent element, as long as it is simple to set margin:0px auto for this element, although some properties can be used in conjunction with a div to be vertically centered with the parent element, but not compatible in some browsers. Here's a way to be compatible with each big browser.
Let's look at a code example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title> <styletype= "Text/css">. Parent{width:200px;Height:200px;Background-color:Green;Display:Table-cell;vertical-align:Middle; }. Children{Background-color:Red;width:80px;text-align:Center;margin:0px Auto; } </style> </Head> <Body> <Divclass= "Parent"> <Divclass= "Children">Ant Tribe</Div> </Div> </Body> </HTML>
The code above works well in a standard browser and is able to align the child elements vertically in the parent element, but IE6 and IE7 are not so power, so the code needs to be modified to be compatible with IE6 and IE7 browsers, but if you just add CSS-compatible code that doesn't change the structure, It is difficult to implement compatible IE6 and IE7, the following code is adjusted as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title> <styletype= "Text/css">. Parent{width:200px;Height:200px;Background-color:Green;position:relative;Display:Table; }. Middle{Display:Table-cell;vertical-align:Middle;*position:Absolute;*top:50%;*left:50%; }. Children{Background-color:Red;width:80px;text-align:Center;margin:0px Auto;*position:relative;*top:-50%;*left:-50%; } </style> </Head> <Body> <Divclass= "Parent"> <Divclass= "Middle"> <Divclass= "Children">Ant Tribe</Div> </Div> </Div> </Body> </HTML>
The above code implements the vertical center effect of the Div. This code does not need to see as a modified version of the first code, can be seen as a complete new version, the following is a brief introduction to how the code is to achieve this effect:
I. Realization of ideas:
Because IE6 and IE7 do not support Display:table-cell and display:table, the height of the middle object is the same as the height of the children object, and if the children object does not set the width, they are exactly the same size. Use absolute positioning for the middle object in IE6 and IE7, and the reference object is the parent object, and its top value is set to 50% so that the position of the top edge of the middle object is exactly the middle position of the parent object's vertical orientation. Also let the children object use positioning, and then set its top value to-50%, so that it moves up half the height of the middle, so that the center of the Children object is located in the middle of the parent object's vertical position, This enables the vertical centering of the children object. There may be friends here who ask why other standard browsers do not use this method, because if the middle object does not have a height set, the set top property does not take effect. The middle background color is set to blue after the slice is run under IE6 and IE7:
Two. Description of the Knowledge point:
1. Asterisks (*) are for compatibility with IE6 and IE7 browsers.
The Display:table-cell in the 2.parent object to add display:table and middle objects corresponds, otherwise the dimensions and contents of the middle element are adaptive, not the same size as the parent element. This will not allow the children object to be centered vertically in a standard browser.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/503.html
Unknown height div compatible with each browser vertical center effect
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
