Home > Developer > Web Develop
Despite the vertical-align features of CSS, it is not possible to solve the problem of vertical centering of unknown heights (in the case of text or pictures with unknown height in a div tag).
Standard browsers such as Mozilla, Opera, Safari , etc., you can set the parent element display mode to table (display:table;), and the inner child element as Table-cell (Display:table-cell) , the Vertical-align feature makes it vertically centered, but non-standard browsers are not supported.
A non-standard browser can only be set to the top of the child element 50%, the inside of a set of elements from the top 50% to offset.
<title>css Unknown Height div vertical center </title>
<style>
body {padding:0; margin:0;}
body,html{height:100%;}
#outer {height:100%; overflow:hidden; position:relative;width:100%; background:ivory;}
#outer [id] {display:table; position:static;}
#middle {position:absolute; top:50%;}
#middle [id] {display:table-cell; vertical-align:middle; position:static;}
#inner {position:relative; top: -50%;width:400px;margin:0 auto;}
Div.greenborder {border:1px solid green; background-color:ivory;}
</style>
<body>
<div id= "outer" >
<div id= "Middle" >
<div id= "inner" class= "Greenborder" >
qee<br/>qee<br/>qee<br/>qee<br/>qee<br/>qee<br/>
</div>
</div>
</div>
</body>
The advantages of the above CSS code is no hacks, the use of IE does not support the CSS2 selector #value[id].
CSS2 selector #value[id] is equivalent to the selector #value, but Internet Explorer does not support this type of selector. similarly. Value[class], equivalent to. value, which only the standard browser can read.
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
