CSS-布局6-相对父元素居中

最新推荐文章于 2022-12-30 16:33:48 发布

weixin_34242658

最新推荐文章于 2022-12-30 16:33:48 发布

阅读量518

点赞数

原文链接：https://yq.aliyun.com/articles/605541

版权

1、实现效果

实现效果

2、实现思路

（1）使用一个div中，放置3个div内容、红色方块、蓝色方块。
（2）设置div的布局为相对定位，设置红色和蓝色方块的盒子为绝对定位。
（3）设置红色方块盒子top:50%，y轴偏移到中间，但是盒子并不是在中间，通过margin-top:-20px. 向上偏移方块的一半，这样红色方块正好到中间。
（4）设置蓝色方块盒子left:50%，x轴偏移到中间，但是盒子并不是在中间，通过margin-left:-20px. 向走偏移方块的一半，这样蓝色方块正好到中间。

3、源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS布局，相对父元素居中</title>
    <style type="text/css">
    body{
        margin: 0px;
    }
    .div1{
        width: 200px;
        height: 200px;
        border: 1px solid gray;
        margin-left: 100px;
        margin-top: 100px;
        position: relative;
    } 
    .div1 .div2{
        position: absolute;
        left: 200px;
        top: 50%;
        width: 10px;
        height: 10px;
        background: blue; 
    }
    .div1 .div3{
        position: absolute;
        left: 50%;
        top : 200px;
        width: 10px;
        height: 10px; 
        background: red;
    }
    </style>
</head>
<body>
    <div class="div1">
         <div class="div2"></div>
         <div class="div3"></div>
    </div>
</body>
</html>