Vertical Center implementation of CSS for Web page making

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.