css实现上下左右居中

css实现子盒子在父级盒子中上下左右居中

几种常用的上下左右居中方式

HTML代码部分
<div class="box"><img src="./img/77.jpeg" alt="" class="img">
</div>
css部分
方式一

利用子绝父相和margin:auto实现

<style>body{margin: 0;}.box{height: 100vh;background-color: hotpink;position: relative;}.img{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}
</style>
方式二

利用子绝父相和css3的transform属性实现

<style>body {margin: 0;}.box {height: 100vh;background-color: hotpink;position: relative;}.img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
</style>

首先把内部盒子的位置设置为顶部和左侧距离大盒子顶部和左侧都是大盒子高度和宽度的50%;然后再把小盒子的顶部和左侧的位置都回退内部小盒子高度和宽度的50%;这样就刚好实现小盒子上下左右都居中在大盒子内部

图示:第一步

image-20240227154952539

第二步:

image-20240227155612504

方式三

利用flex布局实现(弹性盒子)

<style>body {margin: 0;}.box {height: 100vh;background-color: hotpink;/* 对box大盒子启用flex(弹性盒子)布局 */display: flex;/* 定义box中的项目(对于启用flex布局的元素(父元素,也称之为容器),其内部的子元素统一的称之为项目)在交叉轴(flex布局中的定义:垂直方向上的轴线,水平的轴线称之为主轴)上的对齐方式: 上下居中 */align-items: center;/* 定义项目在主轴上的对齐方式:左右居中;图片高度会撑满 */justify-content: center;}
</style>
方式四

利用grid布局实现(网格布局)

<style>body {margin: 0;}.box {height: 100vh;background-color: hotpink;/*  在父元素上开启网格布局,采用网格布局的父元素被称之为容器(container),内部采用网格定位的子元素,称为"项目"(item)  */display: grid;}.img {display: inline-block;/* align-content属性是整个内容区域的垂直位置(上中下) */align-self: center;/* justify-content属性是整个内容区域在容器里面的水平位置 */justify-self: center;}
</style>
方式五

利用display: flex和margin: auto实现

<style>body {margin: 0;}.box {width: 100vw;height: 100vh;background-color: hotpink;display: flex;}.img {/*上下左右都居中*/margin: auto;}</style>
方式六

待更新…

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

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

相关文章

内存管理 -----分段分页

分段 分段&#xff1a;程序的分段地址空间&#xff0c;分段寻址方案 两个问题 分段 &#xff1a;是更好分离和共享 左边是有序的逻辑地址&#xff0c;右边是无序的物理地址&#xff0c;然后需要有一种映射的关系&#xff08;段关联机制&#xff09; 各个程序的分配相应的地址…

Gin入门指南:从零开始快速掌握Go Web框架Gin

官网:https://gin-gonic.com/ GitHub:https://github.com/gin-gonic 了解 Gin Gin 是一个使用 Go 语言开发的 Web 框架,它非常轻量级且具有高性能。Gin 提供了快速构建 Web 应用程序所需的基本功能和丰富的中间件支持。 以下是 Gin 框架的一些特点和功能: 快速而高效:…

Sora模型风口,普通人如何抓住-最新AI系统ChatGPT网站源码,AI绘画系统

一、前言说明 PandaAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持…

边缘计算与任务卸载基础知识

目录 边缘计算简介任务卸载简介参考文献 边缘计算简介 边缘计算是指利用靠近数据生成的网络边缘侧的设备&#xff08;如移动设备、基站、边缘服务器、边缘云等&#xff09;的计算能力和存储能力&#xff0c;使得数据和任务能够就近得到处理和执行。 一个典型的边缘计算系统为…

前端按钮动画

效果示例 代码示例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevic…

OSCP靶场--Resourced

OSCP靶场–Resourced 考点(1.rpc枚举 2.crackmapexec密码喷洒&#xff0c;hash喷洒 3.ntds.dit system提取域hash 4.基于资源的约束委派攻击rbcd) 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC -p- 192.168.188.175 --min-rate 2000 Starting Nmap 7.9…

《一篇文章搞懂git(保姆级教学)》

目录 1.版本管理工具概念 2. 版本管理工具介绍 2.1版本管理发展简史(维基百科) 2.1.1 SVN(SubVersion) 2.1.2 Git 3. Git 发展简史 4. Git 的安装 4.1 git 的下载 ​4.2 安装 5. Git 工作流程 5.1 Git 初始化 5.2 git 流程 5.2.1 流程图 5.2.2概念即详解 6.Git …

IO多路复用:提高网络应用性能的利器

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

unity学习(46)——服务器三次注册限制以及数据库化角色信息1--数据流程

1.先找到服务器创建角色信息代码的位置&#xff0c;UserBizImpl.cs中&#xff1a; public PlayerModel create(string accId, string name, int job) {PlayerModel[] playerModelArray this.list(accId);//list是个自建函数&#xff0c;本质通过accId来查询if (playerModelAr…

【高数】常数项级数概念与性质

下面为个人数学笔记&#xff0c;有需要借鉴即可。 一、常数项级数概念 二、常数项级数性质 三、调和级数 完。

c++之旅——第三弹

大家好啊&#xff0c;这里是c之旅第三弹&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦&#xff01; 一.命名空间;…

项目设计:基于Qt和百度AI的车牌识别系统(嵌入式ARM)

基于Qt和百度AI智能云实现的智能车牌识别系统&#xff0c;具体可实现为停车场管理系统、智能计费停车系统…等。 1.系统实现思路及框架 1.1实现思路 要实现一个车牌识别系统&#xff0c;有多种方法&#xff0c;例如用opencv图像算法实现&#xff0c;或用第三方算法接口&#x…

输出梯形 C语言

解析&#xff1a;这个输出图形的题就是一个找规律加数学计算&#xff0c;我们发现每行比上一行多两个*&#xff0c;最后一行的*表达式为h&#xff08;h-1&#xff09;*2&#xff0c;即3*h-2&#xff0c;那么每一行就是一个先输出最后一行&#xff0d;当前行*个数个空格&#xf…

pytorch 图像数据集管理

目录 1.数据集的管理说明 2.数据集Dataset类说明 3.图像分类常用的类 ImageFolder 1.数据集的管理说明 pytorch使用Dataset来管理训练和测试数据集&#xff0c;前文说过 torchvision.datasets.MNIST 这些 torchvision.datasets里面的数据集都是继承Dataset而来&#xff0c…

[Redis]——Redis命令手册set、list、sortedset

&#x1f333;List类型常见命令 LPUSH / RPUSH [KEY] [element] …… 向列表左侧或者右侧插入一个或多个元素 LPOP / RPOP [key] 删除左边或者右边第一个元素 LRANGE [key] start end 返回索引start到end的元素&#xff08;索引从0开始&#xff09; BLPOP / BRPOP [key] [等…

【C++】类的默认成员函数(上)

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、默认成员函数二、构造函数构造函数的概念及特性 三、析构函数析构函数的特性…

蓝桥杯倒计时 43天 - 前缀和,单调栈

最大数组和 算法思路&#xff1a;利用前缀和化简 for 循环将 n^2 简化成 nn&#xff0c;以空间换时间。枚举每个 m&#xff0c;m是删除最小两个数&#xff0c;那k-m就是删除最大数&#xff0c;m<k&#xff0c;求和最大的值。暴力就是枚举 m-O(n)&#xff0c;计算前 n-(k-m)的…

PCSA时钟控制集成之时钟门控级别

这一部分描述了&#xff1a; • 时钟门控的级别。 • 实现最大效果的时钟门位置。 • 实现有效和高效时钟门控的集成方法。 时钟树是由时钟缓冲器构建的&#xff0c;这些缓冲器在时钟源&#xff08;时钟输入或PLL&#xff09;与时钟终端&#xff08;寄存器或RAM&#xff09…

ULN2003(COM的作用)

单路内部电路原理图 三极管多级放大电路&#xff0c;最大可达到500ma&#xff1b; 典型应用&#xff1a; ULN2003属于灌电流驱动方式&#xff1b;输入与输出电平反向&#xff0c;下拉4K电阻&#xff0c;为解决单片机上电IO瞬间不稳定&#xff1b; COM端 1.可悬空&#xff1a…

git标签操作

一.标签管理 1.理解标签 标签 tag &#xff0c;可以简单的理解为是对某次 commit 的⼀个标识&#xff0c;相当于起了⼀个别名,当我们需要回退到某个重要版本时&#xff0c;直接使⽤标签就能很快定位到 2.创建标签 ⾸先&#xff0c;切换到需要打标签的分⽀上,然后&#xf…