Home > Developer > Web Develop
How to center the div box vertically horizontally in CSS
The overall code is as follows: (for reference only)
<! DOCTYPE html>
<meta charset= "Utf-8" >
<style type= "Text/css" >
. box{
width:200px;
height:200px;
Position:absolute;
left:50%;
top:50%;
margin-left:-100px; Shift the box to the left by half the width of the box
margin-top:-100px; Shift the box up by half the height of the box
background-color:red; Add background color to the box for easy observation and remove background color when you're done
}
</style>
<body>
<div class= "box" >
</div>
</body>
Note: The box is added to the background for easy viewing, or you can choose to add a colored border
1. First Set the box box to absolute positioning (in the upper left corner of the browser is 0 points).
2. Then set 50% for left and right, and let the box box have the top upper corner in the center of the browser.
3. Move the box box to pan left half of the width of the box, and then pan the box up half the height of the box.
Center the box vertically horizontally in CSS
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
