[CSS]中子元素在父元素中居中

news/2024/4/20 12:41:48/

元素居中

对于当行文字居中,比较简单,设置text-align:center和text-height为盒子高度即可

对于父元素中子元素居中,要实现的话有以下几个方法

方法1:利用定位+margin:auto

<style>.father {width: 500px;height: 300px;border: 1px solid #0a3b98;position: relative;}
​.son {width: 100px;height: 40px;background: #f0a238;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin:auto;}
</style>
<div class="father"><div class="son"></div>
</div>

父元素中relative相对定位,子元素absolute绝对定位,并设置top,left,right,bottom为0,并设置margin:auto

方法2:利用定位+margin:负值

<style>.father {position: relative;width: 200px;height: 200px;background: skyblue;}.son {position: absolute;top: 50%;left: 50%;margin-left:-50px;margin-top:-50px;width: 100px;height: 100px;background: red;}
</style>
<div class="father"><div class="son"></div>
</div>

父元素中relative相对定位,子元素absolute绝对定位,并设置top,left为50%,并设置margin-left和margin-top为盒子大小的一半-50px(这种情况需要知道盒子大小)

方法3:利用定位+transform

<style>.father {position: relative;width: 200px;height: 200px;background: skyblue;}.son {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100px;height: 100px;background: red;}
</style>
<div class="father"><div class="son"></div>
</div>

父元素中relative相对定位,子元素absolute绝对定位,并设置top,left为50%,并使用transform移动-50%,transform: translate(-50%,-50%); 此方法不需要知道盒子大小

方法4:利用flex

<style>.father {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background: skyblue;}.son {width: 100px;height: 100px;background: red;}
</style>
<div class="father"><div class="son"></div>
</div>

使用flex布局,设置justify-content: center; 水平居中 align-items: center;设置垂直居中


http://www.ppmy.cn/news/1404036.html

相关文章

766. 托普利茨矩阵

给你一个 m x n 的矩阵 matrix 。如果这个矩阵是托普利茨矩阵&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果矩阵上每一条由左上到右下的对角线上的元素都相同&#xff0c;那么这个矩阵是 托普利茨矩阵 。 示例 1&#xff1a; 输入&#xff1a;matr…

AIGC国内现状-张小珺朱啸虎总结

会议主题&#xff1a;中国现实主义AIGC故事 播客链接: 你们要的朱啸虎&#xff0c;来了 摸鱼总结一些播客观点&#xff0c;用于个人记录~ 总结观点 拿着锤子找钉子是最难的&#xff0c;找到钉子&#xff08;PMF&#xff09;造锤子是正确的思路&#xff0c;小锤子就可以了要…

如何反反爬虫

我们来讲最常见的反反爬虫方法 import requests r requests.get(网页网址) print(r.requests.headers) 一.使用简单的方法把请求头改为真的浏览器模式 import requests link网页地址 heraders{User-Agent:} rrequests.get(link,headersheaders) print(r.requsts.headers)我们…

Unity3D 基于ECS的技能冷却系统设计与实现

前言 在游戏开发中&#xff0c;技能系统是一个非常重要的组成部分&#xff0c;而技能冷却系统则是技能系统中的一个关键功能。在本文中&#xff0c;我们将详细介绍如何使用Unity3D的实体组件系统&#xff08;ECS&#xff09;来设计和实现一个技能冷却系统。 对惹&#xff0c;…

学生成绩管理系统|基于Springboot的学生成绩管理系统设计与实现(源码+数据库+文档)

学生成绩管理系统目录 目录 基于Springboot的学生成绩管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能模块 2、学生功能模块 3、教师功能模块 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源…

【群晖】白群晖如何公网访问

【群晖】白群晖如何公网访问 ——> 点击查看原文 在使用默认配置搭建好的群晖NAS后&#xff0c;我们可以通过内网访问所有的服务。但是&#xff0c;当我们出差或者不在家的时候也想要使用应该怎么办呢&#xff1f; 目前白群提供了两种比较快捷的方式&#xff0c;一种是直接注…

git 修改历史 commit message

目录 1&#xff0c;修改当前的2&#xff0c;修改历史的1&#xff0c;先查看 log2&#xff0c;开始修改 3&#xff0c;其他注意点1&#xff0c;中途不想修改了2&#xff0c;commit ID 会发生变化3&#xff0c;推送远程4&#xff0c;精准定位 1&#xff0c;修改当前的 直接使用下…

深入并广泛了解Redis常见的缓存使用问题

Redis 作为一门主流技术&#xff0c;缓存应用场景非常多&#xff0c;很多大中小厂的项目中都会使用redis作为缓存层使用。 但是Redis作为缓存&#xff0c;也会面临各种使用问题&#xff0c;比如数据一致性&#xff0c;缓存穿透&#xff0c;缓存击穿&#xff0c;缓存雪崩&#…

2024年北京如何办理机动车维修备案

​尊敬的客户&#xff1a; 感谢您选择北京经典世纪集团有限公司-资 质代办&#xff0c;我们将为您提供2024年北京机动车维修备案的详细信息和服务。在本文中&#xff0c;我们将从多个角度出发&#xff0c;为您介绍办理机动车维修备案的重要性、具体步骤、可能忽略的细节和相关知…

数据库管理-第168期 惯性(20240402)

数据库管理168期 2024-04-02 数据库管理-第168期 惯性&#xff08;20240402&#xff09;1 加法的惯性2 创新的惯性3 长期的责任总结 数据库管理-第168期 惯性&#xff08;20240402&#xff09; 作者&#xff1a;胖头鱼的鱼缸&#xff08;尹海文&#xff09; Oracle ACE Associa…

代码随想录算法训练营第28天| 93.复原IP地址*、 78.子集*、 90.子集II*

93.复原IP地址* 力扣题目链接 代码 示例代码 class Solution { private:vector<string> result;// 记录结果// startIndex: 搜索的起始位置&#xff0c;pointNum:添加逗点的数量void backtracking(string& s, int startIndex, int pointNum) {if (pointNum 3) {…

go发布包到github

1. 首先&#xff0c;我们在github上创建一个公有仓库并clone到本地 git clone https://github.com/kmust-why/gdmp-token.git cd gdmp-token/ 2. 在gdmp-token工程中初始化go.mod&#xff0c;其中后面的链接要跟github上创建的仓库和你的用户名对应 go mod init github.com/…

C语言归并递归与非递归实现

test.1 递归 #include<stdio.h> #include<stdlib.h> #include<string.h> #include<assert.h> void MergeSort(int* array, int begin, int end) { if (begin > end) return; //相当于二叉树后序 int mid (end-begin) / 2 be…

【有芯职说】数字IC前端工程师

数字IC前端设计 一、概述 数字IC前端设计,作为数字IC芯片设计流程的关键一环,是数字IC设计类岗位的重要组成部分。随着芯片规模的不断扩大与业务范围的增加,特别是在国产自主化潮流的推动下,该岗位的需求日益增长,经验丰富的工程师更是炙手可热。 数字IC前端设计主要包含…

【洛谷】P9240 [蓝桥杯 2023 省 B] 冶炼金属

题目链接 P9240 [蓝桥杯 2023 省 B] 冶炼金属 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路 这道题可以用数学的方法去做&#xff0c;但是我想不到&#x1f607;有兴趣的可以去看看数学的题解 比较简单的思路就是二分查找&#xff0c;轻松简单不费脑&#xff0c;带你…

代码随想录算法训练营DAY13|C++栈和队列Part.3|LeetCode:239.滑动窗口最大值、347.前K个高频元素

文章目录 239.滑动窗口最大值思路伪代码实现CPP代码实现 347.前K个高频元素整体思路伪代码CPP代码 239.滑动窗口最大值 力扣题目链接 文章链接&#xff1a;239. 滑动窗口最大值 视频链接&#xff1a;单调队列正式登场&#xff01;| LeetCode&#xff1a;239. 滑动窗口最大值 状…

YPay源支付V7开源版

YPay_V7版本即将停止维护更新&#xff0c;同时我们将开放最新版开源代码供学习和参考。虽然首批阶段的【function_8.1.php文件是加密的】&#xff0c;但授权已经除去&#xff0c;该代码将在新版YPay上线时开放给大家。我们也会定期进行迭代更新&#xff0c;随后将创建对应仓库&…

如何通过C++身份证实名认证接口实现实名认证功能

线上平台使用身份核验过程是验证个人身份真实性的过程&#xff0c;对于大多数线上平台来说&#xff0c;自己去开发集成身份证实名认证接口需要耗费大量的人力、物力成本&#xff0c;对此&#xff0c;为助力有需要的企业快速实现实名认证的功能&#xff0c;翔云平台提供了身份证…

书生浦语全链条开源开放体系

开放了高质量语料数据 预训练 微调 评测 评测框架 部署 智能体 例如把openlab对于计算机视觉的封装

大数据学习-2024/3/29-PL/SQL中使用SQL语句对数据进行增删改查

1、创建用户 语法规范&#xff1a;create user 用户名 identifind by 密码; 命名规范&#xff1a;1、不能是纯数字 2、不能有特殊字符&#xff08;&#xff09;例如&#xff1a;yangyin create user yangyin identified by 123456;2、建表 create table 表名( 列名 数据类型…