当前位置: 首页 > news >正文

【CSS 布局】水平垂直方向居中

【CSS 布局】水平垂直方向居中

单行元素

<div class="container"><div class="item"></div>
</div>
  • 方式一:relativeabsolute
.container {position: relative;height: 400px;border: 1px solid #ccc;.item {position: absolute;width: 200px;height: 200px;left: 0;right: 0;bottom: 0;top: 0;margin: auto;border: 1px solid #ccc;}
}
  • 方式二:relativeabsolute(变种,适合于宽高固定)
.container {position: relative;height: 400px;border: 1px solid #ccc;.item {position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-bottom: -100px;width: 200px;height: 200px;border: 1px solid #ccc;}
}
  • 方式三:flexmargin
.container {display: flex;height: 400px;border: 1px solid #ccc;.item {width: 300px;height: 300px;border: 1px solid #ccc;margin: auto; /* 关键点 */ }
}
  • 方式四:flex
.container {display: flex;height: 400px;border: 1px solid #ccc;justify-content: center;align-items: center;.item {width: 300px;height: 300px;border: 1px solid #ccc;}
}
  • 方式五:flex
.container {display: flex;height: 400px;border: 1px solid #ccc;justify-content: center;.item {width: 300px;height: 300px;border: 1px solid #ccc;align-self: center;}
}

多行元素

<div class="container"><img src="./login.png" alt="" /><p>欢迎访问我的个人博客 hhmax.xyz</p><button>按钮</button>
</div>
.container {height: 400px;border: 1px solid #ccc;display: flex;justify-content: center;flex-direction: column;align-items: center;
}

相关文章:

【CSS 布局】水平垂直方向居中

【CSS 布局】水平垂直方向居中 单行元素 <div class"container"><div class"item"></div> </div>方式一&#xff1a;relative 和 absolute .container {position: relative;height: 400px;border: 1px solid #ccc;.item {posit…...

Java实现轻量型Web服务器接收http协议提交的RFID读卡信息

示例使用的读卡器&#xff1a;RFID网络WIFI无线TCP/UDP/HTTP可编程二次开发读卡器POE供电语音-淘宝网 (taobao.com) import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSock…...

模拟实现消息队列项目(完结) -- 基于MQ的生产者消费者模型

目录 前言 1. 生产者 2. 消费者 3. 启动消息队列服务器 4. 运行效果 结语 前言 在上一章节,我们完成了消息队列的客户端部分,至此我们整个消息队列项目就构建完成了,那我们做的这个消息队列到底有什么效果,以及如何去使用我们自己的消息队列呢?那么本文,就将我们的MQ进行实战操…...

专业商城财务一体化-线上商城+进销存管理软件,批发零售全行业免费更新

订货流程繁琐&#xff1f;订单处理效率低&#xff1f;小程序商城与进销存系统不打通&#xff1f;数据需要手动输入同步&#xff1f;财务与的结算对账需要大量手工处理&#xff1f;零售批发从业者&#xff0c;如何你也有以上烦恼&#xff0c;可以看看进销存小程序订货商城&#…...

深度思考mysql面经

推荐 1 索引下推 Mysql性能优化&#xff1a;什么是索引下推&#xff1f; 1.1 定义 索引下推&#xff08;Index Condition Pushdown&#xff0c;简称 ICP&#xff09;是一种数据库优化技术。在传统的数据库查询中&#xff0c;数据库首先使用索引检索来找到符合索引条件的行&…...

2023-08-09力扣每日一题

链接&#xff1a; 1281. 整数的各位积和之差 题意&#xff1a; 十进制每一位的积减去每一位的和 解&#xff1a; 十进制位处理 实际代码&#xff1a; #include<iostream> using namespace std; int subtractProductAndSum(int n) {int t11,t20;while(n){t1*n%10;t…...

[23] Instruct 3D-to-3D: Text Instruction Guided 3D-to-3D conversion

本文提出一种3D-to-3D转换方法&#xff1a;Instruct 3D-to-3D&#xff1b;借助预训练的Image-to-Image扩散模型&#xff0c;本文方法可以使各个视角图片的似然最大&#xff1b;本文方法显式地将source 3D场景作为condition&#xff0c;可以有效提升3D连续性和可控性。同时&…...

设计模式行为型——访问者模式

目录 访问者模式的定义 访问者模式的实现 访问者模式角色 访问者模式类图 访问者模式举例 访问者模式代码实现 访问者模式的特点 优点 缺点 使用场景 注意事项 实际应用 访问者模式的定义 访问者模式&#xff08;Visitor Pattern&#xff09;属于行为型设计模式&am…...

vue3官网文档学习、复习笔记(快速上手)

目录 2.Attribute 绑定&#xff08;v-bind&#xff09; 3.事件监听&#xff08;v-on&#xff09; 4.表单绑定&#xff08;v-model&#xff09; 5.条件渲染&#xff08;v-if&#xff09; 6.列表渲染&#xff08;v-for&#xff09; all.value all.value.filter&#xff08;…...

0基础学习VR全景平台篇 第81篇:全景相机-临云镜如何直播推流

临云镜全景相机是阿里巴巴定制全景设备&#xff0c;实现空间三维信息的快速采集&#xff0c;与阿里云三维空间重建平台搭配&#xff0c;帮助品牌商与平台以较低的成本完成空间的快速采集&#xff0c;并支持对室内/室外空间的三维全景展示及空间漫游&#xff0c;同时支持VR浏览、…...

分数线划定

题目描述 查看题目信息 世博会志愿者的选拔工作正在A 市如火如荼的进行。为了选拔最合适的人才&#xff0c;A 市对所有报名的选手进行了笔试&#xff0c;笔试分数达到面试分数线的选手方可进入面试。 面试分数线根据计划录取人数的150%划定&#xff0c;即如果计划录取m名志愿…...

考研C语言进阶题库——更新26-30题

目录 26.一个正整数&#xff0c;如果等于组成它的各个数字的阶数之和&#xff0c;该整数称为阶乘合数&#xff0c;例如1451阶加四阶加五阶&#xff0c;则145是一个三位阶乘合数&#xff0c;输入一个数&#xff0c;问共有多少个阶乘合数&#xff1f;(十万之内) 27.与2相关的数…...

用C语言实现定积分计算(包括无穷积分/可自定义精度)

关于严谨性的声明&#xff1a; 在用C语言进行定积分的计算之前&#xff0c;我需要声明以下几点&#xff1a; 一、我们所进行定积分计算的函数都是应当是黎曼可积的&#xff0c;这保证了我们即使均匀地分割区间也保证了积分的收敛性。 二、我们同时还应该认识到&#xff0c;鉴…...

使用Presto、Trino数据库时提示“The datetime zone id ‘GMT+08:00‘ is not recognised”

出现这个问题的原因是&#xff1a;Presto、Trino的驱动使用了joda这个库来处理时区的问题。但这个库的编写人似乎对java zone的格式没有太多经验。先看一下出错的代码&#xff1a; com.facebook.presto.jdbc.internal.joda.time.DateTimeZone#forID 根据String类型的zoneId转成…...

C# BeginInvoke 加 EndInvoke实现异步操作

1、定义一个委托 delegate long MyDel(int first, int second); 2、 需异步操作的函数 static int sum(int x,int y) {Console.WriteLine("InSide Sum1");Thread.Sleep(1000);Console.WriteLine("InSide Sum2");return x y;} 3、回调方法…...

“华为杯”研究生数学建模竞赛2015年-【华为杯】B题:数据的多流形结构分析(续)

目录 4.2.2 算法复杂度分析 4.2.3 参数影响 4.2.4 问题 3(a)求解 4.3 问题 3(b) 4.3.1 加权稀疏子空间聚类</...

R语言APSIM模型高级应用及批量模拟

随着数字农业和智慧农业的发展&#xff0c;基于过程的农业生产系统模型在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农田固碳和温室气体排放等领域扮演着越来越重要的作用。APSIM (Agricultural Production Systems sIMulator)模型是世界知名的作物生…...

【硬件设计】模拟电子基础三--集成运算放大电路

模拟电子基础三--集成运算放大电路 一、集成运算放大器1.1 定义、组成与性能1.2 电流源电路1.3 差动放大电路1.4 理想运算放大器 二、集成运算放大器的应用2.1 反向比例运算电路2.2 同向比例运算电路2.3 反向加法运算电路2.4 反向减法运算电路2.5 积分运算电路2.6 微分运算电路…...

JavaWeb(11)——前端综合案例5(小黑记事本)

一、实例需求 ⌛ 功能需求&#xff1a; ① 列表渲染 ② 删除功能 ③ 添加功能 ④ 底部统计 和 清空任务 二、代码实现 ☕ <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8" /> <meta http-equiv"X-UA-Compa…...

在使用TensorFlow的时候内部报错:内部某个方法或属性不存在

看到TensorFlow内部封装的方法报错的时候&#xff0c;我的第一反应是版本不匹配&#xff0c;立马去搜了对应版本&#xff0c;按照网上给的TensorFlow 2.2.0keras 2.3.1 python 3.7&#xff0c;反反复复安装、卸载、升级、降低版本了很多回还是八行&#xff0c;就在心态快要爆爆…...

Python点云实战:统计滤波算法原理剖析与代码实现

1. 统计滤波算法原理详解 第一次接触点云处理时&#xff0c;我被各种滤波算法搞得晕头转向。直到真正理解了统计滤波&#xff0c;才发现它其实就像小区物业筛选业主——通过分析住户的"社交距离"来判断谁是真正的业主&#xff0c;谁是可疑人员。这种算法特别适合处理…...

从“云端裸奔“到“本地堡垒“:一份写给技术决策者的OpenClaw实战手册

"石破天惊混沌开&#xff0c;裂痕深处出新苔。" —— 2026年初&#xff0c;OpenClaw如雨后惊雷炸响全球。当安全漏洞频发、隐私泄露风险暴露&#xff0c;这股热潮逐渐退去&#xff0c;留下的不是盲目跟风的喧嚣&#xff0c;而是对AI技术如何真正赋能办公的深刻思考。…...

Klib未来展望:探索轻量级C库的无限可能与社区共建路线图

Klib未来展望&#xff1a;探索轻量级C库的无限可能与社区共建路线图 【免费下载链接】klib A standalone and lightweight C library 项目地址: https://gitcode.com/gh_mirrors/kl/klib Klib作为一款独立轻量级C语言库&#xff0c;以其高效、简洁的设计理念在开发者社区…...

高级java每日一道面试题-2025年10月14日-团队协作篇[LangChain4j]-如何设计代码审查标准?

设计代码审查标准 在大型项目尤其是使用 LangChain4j 构建 AI 应用的场景中&#xff0c;代码审查&#xff08;Code Review&#xff09;不仅是保证代码质量的手段&#xff0c;更是知识传递、规范落地和风险控制的关键环节。设计一套科学、可执行的代码审查标准&#xff0c;需要从…...

YOLO-v8.3实战指南:手把手教你用Jupyter快速上手物体检测

YOLO-v8.3实战指南&#xff1a;手把手教你用Jupyter快速上手物体检测 1. 环境准备与快速部署 1.1 镜像获取与启动 YOLO-v8.3镜像已经预装了所有必要的依赖项&#xff0c;包括PyTorch框架和Ultralytics工具库。您可以通过以下步骤快速启动&#xff1a; 在CSDN星图平台搜索&q…...

如何快速掌握PDF差异对比工具:diff-pdf终极指南

如何快速掌握PDF差异对比工具&#xff1a;diff-pdf终极指南 【免费下载链接】diff-pdf A simple tool for visually comparing two PDF files 项目地址: https://gitcode.com/gh_mirrors/di/diff-pdf 你是否曾为PDF文档的版本管理而头疼&#xff1f;面对两份相似的PDF文…...

Windows热键冲突快速排查指南:Hotkey Detective实战手册

Windows热键冲突快速排查指南&#xff1a;Hotkey Detective实战手册 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 你是否…...

手把手调参:解决OpenCV光流法追踪“跟丢”和“鬼影”的实战指南

手把手调参&#xff1a;解决OpenCV光流法追踪“跟丢”和“鬼影”的实战指南 去年在开发一套工业质检系统时&#xff0c;我们遇到了一个棘手问题&#xff1a;传送带上的零件因为表面反光和快速移动&#xff0c;导致光流追踪频繁丢失目标。经过两周的密集调参和算法优化&#xff…...

RIGOL DS2302A-S数字示波器:高性能信号分析的终极解决方案

1. 为什么工程师都爱用RIGOL DS2302A-S&#xff1f; 第一次接触RIGOL DS2302A-S是在调试一块高速PCB板时&#xff0c;当时手头的示波器死活抓不到那个诡异的时钟抖动。同事把他的DS2302A-S推过来&#xff0c;300MHz带宽配合2GSa/s采样率&#xff0c;瞬间就让那个藏在噪声里的3n…...

嵌入式开发实战:为Android设备交叉编译mmc-utils工具集

1. 为什么需要交叉编译mmc-utils 在嵌入式开发中&#xff0c;我们经常需要与eMMC存储设备打交道。mmc-utils就是这样一套专门用于管理eMMC存储设备的实用工具集&#xff0c;它提供了读取extcsd、修改分区配置、设置写保护等强大功能。但问题来了——Android设备通常没有预装这些…...