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

简介: 1、实现效果实现效果2、实现思路(1)使用一个div中,放置3个div内容、红色方块、蓝色方块。(2)设置div的布局为相对定位,设置红色和蓝色方块的盒子为绝对定位。

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>
相关文章
|
11天前
|
前端开发 开发者 容器
彻底学会CSS grid网格布局
【4月更文挑战第1天】 彻底学会CSS grid网格布局
14 0
|
2天前
|
前端开发 开发者 容器
【掰开揉碎】详解 CSS3 Grid 布局
【掰开揉碎】详解 CSS3 Grid 布局
N..
|
20天前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
|
27天前
|
前端开发 UED 开发者
探索前端开发中的CSS布局技巧
本文将介绍一些在前端开发中常用的CSS布局技巧,包括盒模型、浮动布局、弹性布局和栅格系统等。通过学习这些技巧,开发者可以更加灵活地控制页面的布局,提升用户体验和界面的美观性。
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 013 HTML布局
编程笔记 html5&css&js 013 HTML布局
|
2月前
|
容器
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
|
2月前
|
前端开发 JavaScript
css制作瀑布流布局
css制作瀑布流布局
15 0
|
2月前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
34 0