p {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;}分析：
top: 50%; left: 50%;让元素的左上在父元素中垂直水平居中
立即学习“前端免费学习笔记（深入）”；
margin-top: -50px; margin-left: -50px;让元素向上向右偏移自身一半的距离
p {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}分析：
top: 50%; left: 50%;让元素的左上在父元素中垂直水平居中
立即学习“前端免费学习笔记（深入）”；
transform: translate(-50%, -50%);让元素向上向右移动自身一半的距离
p {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right : 0;
margin: auto;}分析：
四个方位全部为0时，相互抵消，盒子会在初始位置显示
margin: auto;让盒子垂直水平居中
更多【CSS】定位元素居中显示相关文章请关注PHP中文网！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
531
收藏
