实现子盒子在父盒子中水平垂直居中方法

最新推荐文章于 2024-07-09 15:59:19 发布

小嘉佳

最新推荐文章于 2024-07-09 15:59:19 发布

阅读量569

点赞数

文章标签： css 定位 web

本文链接：https://blog.csdn.net/weixin_49199497/article/details/109077671

版权

实现子盒子在父盒子中水平垂直居中方法

效果如下

body部分如下：

<body>
    <div id="parent">
        <div id="son"></div>
    </div>
</body>

1.定位+偏移（需要知道子盒子的宽高）

#parent{
            width: 300px; height: 300px; background: white;
            border: 1px black solid;
            position: relative; margin: auto;
        }
        #son{
            width: 100px; height: 120px; background: red;
            position: absolute; top: 50%; left: 50%; 
            margin-top: -60px; margin-left: -50px;
        }

2.定位+transform（不需要知道子盒子的宽高）

 #parent{
            width: 300px; height: 300px; background : white;
            border: 1px black solid;
            position: relative; margin: auto;
        }
        #son{
            width: 100px; height: 120px; background: red; 
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%,-50%);
        }

3.绝对定位+margin：auto

#parent{
            width: 300px; height: 300px; background : white;
            border: 1px black solid; margin: auto;
            display:flex;
        }
        #son{
            width: 100px; height: 120px; background: red; 
            top:0; bottom:0; left:0; right:0;
            margin: auto;
        }

4.设置父盒子为flex容器

#parent{
            width: 300px; height: 300px; background : white;
            border: 1px black solid; margin: auto;
            display:flex;
            align-items:center;
        }
        #son{
            width: 100px; height: 120px; background: red; 
            margin: auto;
        }

小嘉佳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
实现子盒子在父盒子中水平垂直居中方法

实现子盒子在父盒子中水平垂直居中方法1.定位+偏移（需要知道子盒子的宽高）2.定位+transform（不需要知道子盒子的宽高）3.绝对定位+margin：auto4.设置父盒子为flex容器效果如下body部分如下：<body> <div id="parent"> <div id="son"></div> </div></body>1.定位+偏移（需要知道子盒子的宽高）#parent{
复制链接

扫一扫