css| Web page
if box width and height are known:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<style type= "Text/css" >
body{
Font-family:arial, Helvetica, Sans-serif;
font-size:12px;
margin:0;
Padding:0;/*--for opera--*/
}
#layout {
position:absolute;/*--Absolute Positioning--*/
top:50%;
left:50%;
Margin-top: Half of -240px;/*--div height--*/
Margin-left: Half of -320px;/*--div width--*/
width:640px;
height:480px;
Background: #ECECEC;
}
pre{
padding:15px;
}
</style>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<body>
<div id= "Layout" ><pre> body{
Font-family:arial, Helvetica, Sans-serif;
font-size:12px;
margin:0;
Padding:0;/*--for opera--*/
}
#layout {
position:absolute;/*--Absolute Positioning--*/
top:50%;
left:50%;
Margin-top: Half of -240px;/*--div height--*/
Margin-left: Half of -320px;/*--div width--*/
width:640px;
height:480px;
Background: #ECECEC;
}
pre{
padding:15px;
}
</pre></div>
</body>
Explanation:If you set the midpoint of the screen to the coordinate origin (0 0), the positive direction of X is the right side of the screen, and the square of Y to the top of the screen. So in the case of the known box width and height, the box's properties are absolutely positioned, top:50% left:50%, so that the upper-left corner of Box is at the coordinate origin (0 0), set margin-left:-320px (half of the width), and the upper-left corner coordinates (-320 0) , and then set margin-top:-240px (half of the height), the coordinates of the upper-left corner are now (-320 240), the box is completely centered relative to the origin, and the value points of four vertices are (320 240) Ⅰ, (-320 240) Ⅱ, (-320-240) Ⅲ, (320-240) Ⅳ.
Available on the home page with the language selected version or welcome.
Single-line text can be centered vertically with row heights, or adjusted with padding.
