css实现居中

基础代码

<div class="box"><div class="content"></div>
</div>

css实现居中的几种方式

        1、flex布局(水平垂直)

.box {width: 200px;height: 200px;background-color: pink;display: flex;justify-content: center;align-items: center;
}
.content {width: 100px;height: 100px;background-color: lawngreen;
}

        2、margin:auto;(水平)

.box {width: 200px;height: 200px;background-color: pink;
}
.content {width: 100px;height: 100px;background-color: lawngreen;margin: auto;
}

        3、固定定位+transform(水平垂直)

.box {width: 200px;height: 200px;background-color: pink;position: relative;
}
.content {width: 100px;height: 100px;background-color: lawngreen;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}

        4、vertical-align: middle;(垂直)

.box {width: 200px;height: 200px;background-color: pink;
}
.content {width: 100px;height: 100px;background-color: lawngreen;
}
.box::after, .content{display:inline-block;vertical-align:middle;
}
.box::after{content:'';height:100%;
}

        5、line-heihgt + text-align

.text-box {width: 100px;height: 50px;background-color: aquamarine;text-align:center;
}
.text-box span {line-height: 50px;
}<div class="text-box"><span>1</span></div>

 

 

 

         

 

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

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

相关文章

24计算机考研调剂 | 太原理工大学

太原理工大学智能光学实验室招生2024级硕士研究生 考研调剂招生信息 学校:太原理工 专业:工学->光学工程 工学->仪器科学与技术 工学->软件工程 工学->计算机科学与技术 工学->控制科学与工程 年级:2024 招生人数:- 招生状态:正在招生中 联系方式:**…

大唐杯学习笔记:Day1

1.1 5G移动通信系统 系统整体架构 { 5 G C ( 5 G 核心网 ) N G − R A N ( 5 G 无线接入网 ) : g N B 、 n g − e N B 系统整体架构 \begin{cases} 5GC(5G核心网)\\ NG-RAN(5G无线接入网):gNB、ng-eNB \end{cases} 系统整体架构{5GC(5G核心网)NG−RAN(5G无线接入网):gNB、ng−…

分类问题经典算法 | 二分类问题 | Logistic回归:梯度下降

目录 一. 损失函数1. 交叉熵损失函数2. 梯度下降 一. 损失函数 Logistic回归算法公式推导篇中&#xff0c;我们通过对似然函数求对数&#xff0c;得到 l ( θ ) l(\theta ) l(θ)&#xff1a; l ( θ ) l n [ L ( θ ) ] ∑ i 1 M { y ( i ) l n [ h θ ( x ( i ) ) ] ( …

AI智能分析网关V4智慧环保/智慧垃圾站视频智能分析与监控方案

一、背景介绍 随着城市化进程的加速&#xff0c;垃圾处理问题日益受到人们的关注&#xff0c;传统的垃圾站管理方式已经无法满足现代社会的需求。针对当前垃圾站的监管需求&#xff0c;TSINGSEE青犀可基于旗下视频智能检测AI智能分析网关V4与安防监控视频综合管理系统EasyCVR平…

如何添加极狐GitLab Runner 信任域名证书

本文作者 徐晓伟 极狐Gitlab Runner 信任实例域名证书&#xff0c;用于注册注册极狐 GitLab Runner。 问题 参见 极狐gitlab-runner-host.md 说明 解决方案是使用颁发给域名 gitlab.test.helm.xuxiaowei.cn 的证书&#xff0c;可以使用自己的域名去各大云厂商免费申请&#…

TG-ADMIN 权限管理系统

项目简介 该项目是一款基于 SpringBoot + Vue2 + Jwt + ElementUi的 RBAC模型管理系统。 主要以自定义拦截器和jwt结合进行权限验证 通过自定义指令实现按钮级别权限,使用经典的RBAC模型 什么是RBAC? 1、RBAC模型概述 RBAC模型(Role-Based Access Control:基于角色的…

Go语言语法基础入门

目录 一、开篇二、环境与配置三、Hello, World!四、变量与类型五、条件语句六、循环语句七、函数八、数组与切片九、结构体十、错误处理十一、结语 一、开篇 Go语言&#xff0c;作为近年来备受瞩目的编程语言&#xff0c;以其高效、简洁和强大的并发处理能力赢得了众多开发者的…

面试数据库篇(mysql)- 03MYSQL支持的存储引擎有哪些, 有什么区别

存储引擎就是存储数据、建立索引、更新/查询数据等技术的实现方式 。存储引擎是基于表的&#xff0c;而不是基于库的&#xff0c;所以存储引擎也可被称为表类型。 MySQL体系结构 连接层服务层引擎层存储层 存储引擎特点 InnoDB MYSQL支持的存储引擎有哪些, 有什么区别 ? my…

nginx使用详解--流控

Nginx可以通过实现流量控制&#xff08;流控&#xff09;来限制对服务器的访问并保护其免受过载的影响&#xff0c;限流有以下几种&#xff1a; 正常限制访问频率&#xff08;正常流量&#xff09; 突发限制访问频率&#xff08;突发流量&#xff09; 限制并发连接数 黑白名单配…

【QT+QGIS跨平台编译】之六十:【QGIS_CORE跨平台编译】—【错误处理:TEST_DATA_DIR】

文章目录 一、TEST_DATA_DIR宏定义二、解决办法2.1 方法一2.2 方法二一、TEST_DATA_DIR宏定义 代码中较多地方引用了TEST_DATA_DIR 但是没有对其进行定义。 下载的QGIS的目录 qgis-3.22.8\tests\testdata 有对应的数据资源。 二、解决办法 2.1 方法一 在 pro 文件的预定义项…

叠氮生物素,Biotin-azide ,含有生物素基团和叠氮基团

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;生物素-叠氮&#xff0c;生物素叠氮&#xff0c;叠氮生物素&#xff0c;Biotin-azide &#xff0c;Azide-Biotin&#xff0c;Biotin-N3&#xff0c;N3-Biotin&#xff0c;908007-17-0 一、基本信息 【产品简介】&a…

jax可微分编程的笔记(9)

jax可微分编程的笔记(9) 第九章 案例:FAST主动反射面的形态调整 深度学习是可微分编程框架下的一个极为重要的使用场景。 模型&#xff0c;损失函数及优化算法是常见优化问题的3个组成部分。 其概念的外延并不仅仅局限于深度学习。优化问题中的模型 除了神经网络&#xff0c;…

Tomcat部署及多实例

一、Tomcat简介 1、简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试JSP 程序的首选。 当在一台机器上配置好Apache 服务器&#xff0c…

java 基础上(1)(核心知识搭配代码)

前言 java的学习分为了上部分以及下部分进行学习&#xff0c;上部分就是对于java的基础知识&#xff0c;面向对象上&#xff0c;面向对象下&#xff0c;异常操作&#xff0c;javaApi&#xff1b;下部主要是集合&#xff0c;泛型&#xff0c;反射&#xff0c;IO流&#xff0c;J…

BP 神经网络原理

BP (Back Propagation) 神经网络是1986年由 Rumelhart 和 McClelland 为首的科学家提出的概念&#xff0c;是一种按照误差逆向传播算法训练的多层前馈神经网络&#xff0c;是应用最广泛的神经网络。 1 BP 神经网络的结构和传播规则 BP神经网络由 输入层、隐含层&#xff08;也…

【开源】JAVA+Vue.js实现天沐瑜伽馆管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 瑜伽课程模块2.3 课程预约模块2.4 系统公告模块2.5 课程评价模块2.6 瑜伽器械模块 三、系统设计3.1 实体类设计3.1.1 瑜伽课程3.1.2 瑜伽课程预约3.1.3 系统公告3.1.4 瑜伽课程评价 3.2 数据库设计3.2.…

Qt-QThread与QProcess 线程与进程介绍、对比与使用

目录 1 线程与进程的区别与联系1.1 进程定义1.2 线程定义1.3 线程与进程的区别1.4 线程与进程的联系2 QThread2.1 序言2.2 成员函数2.3 使用流程2.4 注意事项3 QProcess参考链接1 线程与进程的区别与联系 线程和进程是操作系统中两个重要的概念,它们在计算机系统中扮演着不同…

Java基于微信小程序的房屋租赁、租房小程序,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

逻辑漏洞(pikachu)

#水平&#xff0c;垂直越权&#xff0c;未授权访问 通过个更换某个id之类的身份标识&#xff0c;从而使A账号获取&#xff08;修改、删除&#xff09;B账号数据 使用低权限身份的账号&#xff0c;发送高权限账号才能有的请求&#xff0c;获得其高权限操作 通过删除请求中的认…

cocos2d-lua:骨骼动画的使用

骨骼动画的使用 spine骨骼动画的使用Armature骨骼动画 spine骨骼动画的使用 -- spine骨骼动画导出的文件为&#xff1a;xxx.atlas&#xff0c;xxx.json&#xff0c;xxx.png 三个文件需同时存在 local spine sp.SkeletonAnimation:create("xxx.json", "xxx.atl…