【CSS】div 盒子居中的常用方法

<body><div class="main"><div class="box"></div></div>
</body>
  1. 绝对定位加 margin: auto;
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;position: relative;margin: 30px auto;}.box {width: 100px;height: 100px;background-color: #f00;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
</style>
  1. 绝对定位加负 margin:
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;position: relative;margin: 30px auto;}.box {width: 100px;height: 100px;background-color: #f00;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;}
</style>
  1. margin 推动:
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;margin: 30px auto;}.box {width: 100px;height: 100px;background-color: #f00;margin: 150px 150px;}
</style>
  1. flex 居中:
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;margin: 30px auto;display: flex;justify-content: center;align-items: center;}.box {width: 100px;height: 100px;background-color: #f00;}
</style>
  1. transform:
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;margin: 30px auto;position: relative;}.box {width: 100px;height: 100px;background-color: #f00;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
</style>
  1. 子盒子宽高不确定(需要保证left和right的百分数一样,top和bottom的百分数一样):
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;margin: 30px auto;position: relative;}.box {background-color: #f00;position: absolute;left: 25%;top: 25%;right: 25%;bottom: 25%;}
</style><body><div class="main"><div class="box"></div></div>
</body>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/162581.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

给定n个点或一个凸边形,求其最小外接矩形,可视化

这里写目录标题 原理代码 原理 求n个点的最小外接矩形问题可以等价为先求这n个点的凸包&#xff0c;再求这个凸包的最小外接矩形。 其中求凸包可以使用Graham-Scan算法 需要注意的是&#xff0c; 因为Graham-Scan算法要求我们从先找到凸包上的一个点&#xff0c;所以我们可以先…

【加载自定义控制器 Objective-C语言】

一、接下来要做的操作,就比较关键了 1.前面,我们在从UI基础,然后到UI进阶,第一天,然后到目前为止, 所有的应用程序,新建的项目,启动以后,加载的控制器,是不是都是Main.storyboard里面带箭头儿的那个控制器, 然后呢,你也可以通过新建一个storyboard,然后呢,给它…

默默消失的6大APP,不少中年人估计都用过?

随着科技的发展&#xff0c;这些曾经风靡一时的APP逐渐消失在人们的视线中。然而&#xff0c;它们的消失并不代表它们的价值被完全抹去。相反&#xff0c;它们所代表的一段历史和人们的回忆将永远留存在人们心中。 第一个千千静听是我们青少年时代的伴侣&#xff0c;它陪伴我们…

Wnmp服务安装并结合内网穿透实现公网远程访问——“cpolar内网穿透”

文章目录 前言1.Wnmp下载安装2.Wnmp设置3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 WNMP是Windows系统下的绿色NginxMysqlPHP环境集成套件包&#xff0c;安装完成后即可得到一个Nginx MyS…

MSF暴力破解SID和检测Oracle漏洞

暴力破解SID 当我们发现 Oracle 数据库的 1521 端口时,我们可能考虑使用爆破 SID(System Identifier)来进行进一步的探测和认证。在 Oracle 中,SID 是一个数据库的唯一标识符。当用户希望远程连接 Oracle 数据库时,需要了解以下几个要素:SID、用户名、密码以及服务器的 I…

【LeetCode:318. 最大单词长度乘积 | 模拟 位运算】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

【广州华锐互动】VR历史古城复原:沉浸式体验古代建筑,感受千年风华!

在科技日新月异的今天&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经成为了我们生活中不可或缺的一部分。从娱乐游戏到医疗健康&#xff0c;从教育培训到房地产销售&#xff0c;VR技术的应用领域日益广泛。而近年来&#xff0c;VR技术在文化遗产保护和古迹复原方面的…

2023年亚太杯APMCM数学建模大赛ABC题辅导及组队

2023年亚太杯APMCM数学建模大赛 ABC题 一元线性回归分析类 回归分析&#xff08;Regression Analysis)是确定两种或两种以上变量间相互依赖的定量关系的一种统计分析方法。   – 按涉及变量个数划分   • 一元回归分析   • 多元回归分析   – 按自变量和因变量之间关…

JS+CSS随机点名详细介绍复制可用(可自己添加人名)

想必大家也想拥有一个可以随机点名的网页&#xff0c;接下来我为大家介绍一下随机点名&#xff0c;可用于抽人&#xff0c;哈哈 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>* {margin: 0;…

代码随想录 Day38 完全背包问题 LeetCode T70 爬楼梯 T322 零钱兑换 T279 完全平方数

前言 在今天的题目开始之前,让我们来回顾一下之前的知识,动规五部曲 1.确定dp数组含义 2.确定dp数组的递推公式 3.初始化dp数组 4.确定遍历顺序 5.打印dp数组来排错 tips: 1.当求取物品有限的时候用0-1背包,求取物品无限的时候用完全背包 结果是排列还是组合也有说法,当结果是组…

【Mybatis小白从0到90%精讲】12:Mybatis删除 delete, 推荐使用主键删除!

文章目录 前言XML映射文件方式推荐使用主键删除注解方式工具类前言 在实际开发中,我们经常需要删除数据库中的数据,MyBatis可以使用XML映射文件或注解来编写删除(delete)语句,下面是两种方法的示例。 XML映射文件方式 Mapper: int delete(int id);Mapper.xml:

抖音10月榜单有哪些看点?

10月20日&#xff0c;抖音双11好物节在抖音平台正式开启抢跑&#xff0c;据数据显示&#xff0c;截止10月31日平台多项双11销售增长记录再次被刷新。 *新抖双十一活动也已开启&#xff0c;最高可省30788元&#xff0c;活动详情&#x1f449; 抖音平台内大促氛围火爆&#xff0…