绝对定位实现子盒子在父盒子中居中对齐

lxl211

于 2023-02-01 20:05:34 发布

阅读量237

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/lxllxl211/article/details/128839121

版权

    <style>
        .son {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="son"></div>
</body>

在这里插入图片描述
son盒子加absolute,父盒子就是浏览器屏幕

绝对定位的盒子，不能使用margin 0 auto；居中了
相对定位的盒子可以

写代码:

left: 50%;

相对父盒子向右移动了50%
在这里插入图片描述

然后再往左移动自己盒子的一半
然后就可以水平居中了

 margin-left: -50px;

在这里插入图片描述
同理,在垂直方向上添加

top: 50%;
margin-top: -50px;

在这里插入图片描述

就可以让盒子水平垂直居中了
/* 这个移动自己盒子的一般可以用这个代替 */

transform: translate(-50%, -50%) ;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lxl211

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绝对定位实现子盒子在父盒子中居中对齐

绝对定位的盒子，不能使用margin 0 auto；son盒子加absolute,父盒子就是浏览器屏幕。/* 这个移动自己盒子的一般可以用这个代替 */然后再往左移动自己盒子的一半。相对父盒子向右移动了50%就可以让盒子水平垂直居中了。同理,在垂直方向上添加。然后就可以水平居中了。
复制链接

扫一扫