利用相对定位和绝对定位让盒子居中

最新推荐文章于 2023-03-09 14:41:28 发布

小白0119

最新推荐文章于 2023-03-09 14:41:28 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/qq_43445449/article/details/125837620

版权

1.首先有一大一小两个盒子,并且小盒子跟大盒子是一个嵌套关系,要想小盒子在大盒子里面水平居中以及垂直居中.所以给小盒子绝对定位,给大盒子相对定位,让小盒子在大盒子里面移动.第一,先让小盒子移动大盒子的一半,即

left: 50%;

这时盒子会超过大盒子的一半宽度,再让小盒子移回来小盒子一半的宽度,这时就可以达到水平居中

这里可以用margin-left或者transform,都是可以实现居中的,垂直居中同理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .father .son {
            position: absolute;
            /* 先移动父盒子的一半 */
            left: 50%;
            margin-left: -100px;
            /* transform: translate(-50%,0); */
            top: 50%;
            margin-top: -100px;