Sisters of image vertical centering DIV vertical centering_Experience exchange

Finally, thank you raozou for sharing the effect code!

<style type="text/css"> <!-- #middle { background:blue; position:absolute; left:expression((body.clientWidth-50)/2 "px"); top:expression((body.clientHeight-50)/2 "px"); width:50px; height:50px; } --> </style> <div id="middle" align="absmiddle"></div> <!--absmiddle The middle of the image is aligned with the middle of the largest element on the same line. -->
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before executing]

Note: This code does not have a document type and namespace declaration. I have I have tried it. If I add it, the blue square will be at the top and part
will be hidden by the browser. You can try it! In addition, FF does not support expression.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>DIV vertically centered</title> <style type="text/css"> #menu { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -150px; color:blue; width: 300px; height: 50px; border:solid 1px gray; } </style> <div id="menu">Center the page horizontally and vertically</div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh to execute]

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>DIV vertically centered</title> <style type="text/css"> #menu { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -150px; color:blue; width: 300px; height: 50px; font-weight:bold; border:solid 1px gray; line-height:50px; font-size:20px; text-align:center; } </style> <div id="menu">Center the page horizontally and vertically</div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]