Home > Developer > Web Develop
Original address: http://www.manongjc.com/article/374.html
CSS how to achieve a full-screen horizontal vertical Center Div, this chapter describes how a DIV element in the entire page to achieve horizontal vertical center effect, the code is the most convincing, directly look at the code.
The code is as follows:
<!DOCTYPE HTML> <HTML> <Head> <title>CSS implementation div horizontally vertically centered on screen</title><styletype= "Text/css">Body{margin:0px;padding:0px; }#thediv{width:100px;Height:100px;background:Green;position:Absolute; Left:50%;Top:50%;Margin-left:-50px;Margin-top:-50px;}</style> </Head> <Body> <DivID= "Thediv"></Div></Body> </HTML>
Run online
The above code will be the div in the page to achieve a full-screen center effect, the following brief introduction of its implementation process.
Implementation principle:
Set the div element to absolute positioning, and then set its left and right property values to 50%, this time the div is not centered, the center is the upper left corner of the Div, so we also need to pull it up and to the left a certain distance, the distance is the height and width of half.
CSS implementation div horizontally vertically centered on screen
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
