CSS核心(四十二)使用相对定位和绝对定位来实现子元素的水平垂直居中

[复制链接] [提交至百度]
查看: 689|回复: 7

857

主题

1451

帖子

6904

积分

管理员

人亦已歌

Rank: 12Rank: 12Rank: 12

积分
6904

活跃会员热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

发表于 2023-2-1 15:45:04 | 显示全部楼层 |阅读模式
实现子元素的水平垂直居中是一种很常用的需求,本文就来讲解一下如何使用相对定位和绝对定位来实现子元素的水平和垂直居中。

请看如下代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用相对定位和绝对定位来实现子元素的水平垂直居中</title>
</head>
<style>
        .box{
                width:500px;
                height:500px;
                background:#0f0;
                position: relative;
        }
        .box1{
                width:200px;
                height:200px;
                background:#f00;
                position:absolute;
                left:50%;
                top:50%;
                margin-left:-100px;
                margin-top:-100px;
        }

</style>
<body>
<div class="box">
        <div class="box1"></div>
</div>
</body>
</html>


显示效果如下:

CSS核心(四十二)使用相对定位和绝对定位来实现子元素的水平垂直居中

解释一下:

首先我们给父元素设置了position: relative;相对定位,然后又给子元素设置了position:absolute;绝对定位,然后将子元素向右偏移50%,向下偏移50%,此时,子元素的左边距离父元素的左边为父元素尺寸的50%,顶边同理。所以,如果我们想让子元素居中,就需要使用外边距缩减其占位空间为子元素长宽的一半。

以上逻辑是个固定模式,实在理解不了记住即可。


发表于 2023-2-18 18:26:38 | 显示全部楼层
不错,真的不错,很受感悟,让计算机执行更少的指令完成更多的工作,才是我所愿~

0

主题

6

帖子

3

积分

营销入门

Rank: 2

积分
3
发表于 2023-2-26 04:39:31 | 显示全部楼层
任重道远啊~~~~~  

0

主题

159

帖子

81

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
81

终身会员

发表于 2023-3-1 20:59:38 | 显示全部楼层
我真的很受启发!

0

主题

6

帖子

3

积分

营销入门

Rank: 2

积分
3
发表于 2023-3-9 06:05:32 | 显示全部楼层
…………………………………………………………………………

0

主题

3

帖子

2

积分

营销入门

Rank: 2

积分
2
发表于 2023-3-15 12:56:12 | 显示全部楼层
不错不错

0

主题

8

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-3-19 20:43:49 | 显示全部楼层
已经看过了但是现在看到还是要顶你呵呵
发表于 3 天前 | 显示全部楼层
这贴子让我当头一棒,也让我走出了心中的疙瘩,谢谢你楼主
懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

精彩图文
 
 
在线客服
技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表