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 ">
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.
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.