作者：儒雅的aaaaaaaaaaa | 来源：互联网 | 2024-11-24 18:02
方法1：使用绝对定位和transform
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
通过设置position为absolute，并将left和top都设置为50%，再使用transform: translate(-50%, -50%)来调整位置，使得div元素能够精确地居中。
示例代码：
.div1 {
width: 400px;
height: 400px;
border: #CCC 1px solid;
background: #99f;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
方法2：使用绝对定位和auto margin
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
这种方法通过将div的四个方向的位置都设为0，然后利用自动外边距（margin: auto）来实现居中效果。
示例代码：
.div2 {
width: 400px;
height: 400px;
border: #CCC 1px solid;
background: #99f;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
方法3：使用绝对定位和手动偏移
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
这种方法通过将left和top设置为50%，然后手动减去div的一半宽度和高度来实现居中。
示例代码：
.div3 {
width: 400px;
height: 400px;
border: #CCC 1px solid;
background: #9f9;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
}
京公网安备 11010802041100号