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

CSS实现DIV水平与垂直居中方法总结

news 来源：原创 2025/5/15 14:05:28

大家好，欢迎来到程序视点！我是你们的老朋友.小二！

CSS实现DIV水平与垂直居中方法总结

一、水平居中方案

  1. 标准方法

    .center-div {margin-left: auto;margin-right: auto;
}

    • 关键点：必须声明DOCTYPE（推荐XHTML 1.0 Transitional DTD），否则IE不生效

    • 浏览器差异：Firefox直接生效，IE需DTD支持

  2. 兼容性方案

    body { text-align: center; }  /* 父级 */
#center { margin: 0 auto;          /* 子级 */text-align: left;        /* 防止文字继承居中 */
}
二、垂直居中方案

  1. 背景图片居中

    .bg-center {background: url(...) no-repeat center;
}

  2. 文本垂直居中

    .text-center {height: 200px;line-height: 200px;      /* 行高=容器高度 */vertical-align: middle;  /* 需配合display属性使用 */
}

  3. 绝对定位+expression（IE特有）

    #element {position: absolute;top: expression((document.body.clientHeight-50)/2);left: expression((document.body.clientWidth-50)/2);
}
三、关键注意事项

  1. DTD声明是IE下水平居中的前提

  2. 多DIV嵌套时建议逐层设置margin:auto而非全局控制

  3. 垂直居中需区分内容类型（图片/文本/区块）

  4. expression方法存在性能问题，现代开发建议使用Flexbox替代

四、现代CSS替代方案（补充）

推荐使用Flexbox实现：

.container {display: flex;justify-content: center;  /* 水平居中 */align-items: center;      /* 垂直居中 */
}

注：原文案例基于IE6/Firefox 1.0环境，部分方法（如expression）已过时，但核心原理仍具参考价值。

最后

【程序视点】助力打工人减负，从来不是说说而已！后续小二哥会继续详细分享更多实用的工具和功能。

如果这篇文章对你有帮助的话，别忘了【在看】【点赞】支持下哦~

相关文章：

CSS实现DIV水平与垂直居中方法总结

大家好，欢迎来到程序视点！我是你们的老朋友.小二！ CSS实现DIV水平与垂直居中方法总结 一、水平居中方案 标准方法 .center-div {margin-left: auto;margin-right: auto; }关键点：必须声明DOCTYPE（推荐XHTML 1.0 Tran…...

编程日记 2025/5/15 14:05:28

AI 助力 Python：长时序植被遥感动态分析与生态评估

技术点目录 Python遥感数据处理基础及AI大模型应用技巧常用共享数据资源介绍AI辅助下地球科学数据处理方法及python实现AI辅助下植被参数遥感反演基本原理及python实现AI辅助下地球科学数据分析方法及python实现AI辅助下植被物候提取与分析实践应用AI辅助下植被时空动态分析及p…...

编程日记 2025/5/1 9:07:43

卫星变轨轨迹和推力模拟（单一引力源）MATLAB

代码说明： 常量定义：定义了万有引力常数、地球和月球的质量、半径以及地月平均距离。初始状态设置：设置卫星的初始位置、速度和姿态，以及月球的初始位置。模拟循环：在循环中计算地球和月球对卫星的引力，模…...

编程日记 2025/5/1 9:07:43

2025华东杯B题华东杯数学建模思路代码成品讲解工序安排问题

完整内容请看文章最下面的推广群 我将展示完整的文章、代码和结果 工序安排问题 摘要 本文研究的核心是制造业中的工序安排优化问题，源自实际生产管理中常见的资源分配挑战。问题背景设定为一家拥有100名工人和三条相同服装生产线的成衣制造厂，涉及裁…...

编程日记 2025/5/1 9:06:38

Python的赋值操作都是引用吗？

Python的赋值操作都是引用吗？ 一言以蔽之：Python的赋值本质都是引用传递，但不可变对象的表现类似于值传递，这是由对象不可变性造成的效果。（我非常确信这篇笔记说的内容都是正确的，这篇笔记是deepseekv3的…...

编程日记 2025/5/1 9:06:37

学习influxDB的安装和使用

influxDB的使用场景 nfluxDB 是一种时序数据库，时序数据库通常被用在监控场景,用来收集各个节点采集到的监控指标,以及监控指标产生的时间点.比如我们收集的主机的监控数据,可以通过查询语句,统计查询过去30分钟内cpu的平均使用率是多少. 相比关系型数据库与时序数…...

编程日记 2025/5/1 9:06:36

LeetCode209_长度最小的子数组

LeetCode209_长度最小的子数组 标签：#数组 #二分查找 #前缀和 #滑动窗口Ⅰ. 题目Ⅱ. 示例0. 个人方法：滑动窗口 标签：#数组 #二分查找 #前缀和 #滑动窗口 Ⅰ. 题目 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足…...

编程日记 2025/5/1 9:05:33

uniapp 实现时分秒 分别倒计时

效果 <view class"issue-price-countdown"> <CountDown :endTimestamp"1745996085000"></CountDown> </view> 引入组件 import CountDown from /components/CountDown.vue; <template> <view class&qu…...

编程日记 2025/5/1 9:05:32

ubuntu下一些环境配置

1、qhull sudo apt install qhull-bin libqhull-dev 2、cmake wget -O - https://apt.kitware.com/keys/kitware-archive-latest.asc 2>/dev/null | gpg --dearmor - | sudo tee /usr/share/keyrings/kitware-archive-keyring.gpg >/dev/null echo "deb [signed…...

编程日记 2025/5/10 13:12:18

el-check-box多选框和el-select下拉框组合

<template><div><el-selectv-model"selectedValues"multiplecollapse-tagsplaceholder"请选择电压等级"change"handleChange"><el-option key"all" value"all" class"select-all-option">…...

编程日记 2025/5/1 9:03:25

SPSS PCA+判别分析

1&#xff0c; 主成分分析PCA 我们只要对数化的变量数据&#xff1a; &#xff08;1&#xff09;对数据进行标准化处理&#xff1a; 选择【分析】—【描述统计】—【描述】 添加要标准化的变量&#xff0c;勾选【将标准化值另存为变量(Z)】&#xff0c;再点确定 SPSS软件本身不…...

编程日记 2025/5/1 9:03:24

【阿里云大模型高级工程师ACP习题集】2.7 通过微调增强模型能力 (下篇)（⭐️⭐️⭐️ 重点章节！！！）

习题集： 【单选题】在阿里云大模型微调中，以下关于预训练和微调的说法，错误的是？（ ） A. 预训练使用自监督/无监督学习方式 B. 微调通常在大规模通用数据集上进行 C. 预训练模型可以为下游任务提供初始模型 D. 微调能让模型适应具体的下游任务 【多选题】LoRA微调中，低秩…...

编程日记 2025/5/1 9:03:23

ag-grid-react 列表导出csv列表getDataAsCsv （自定义导出列表配置）自定义新增，修改导出内容

1.ag-grid-react getDataAsCsv 新增导出字段 方法&#xff1a;临时添加列再导出 你可以通过 columnApi.setColumnDefs() 临时添加需要导出的字段&#xff0c;然后再调用 getDataAsCsv&#xff0c;导出后再恢复原来的列。 import { useRef } from react; import { AgGridReac…...

编程日记 2025/5/1 9:03:19

深度解析：Vue.js 性能优化全景指南（从原理到实践）

前言 随着 Vue.js 应用复杂度提升&#xff0c;性能问题逐渐成为制约用户体验的瓶颈。本文将系统性地剖析 Vue.js 性能优化的 核心原理、关键技巧、工具链支持&#xff0c;并通过真实案例演示如何提升大型应用的运行时性能与加载效率。 一、渲染层优化&#xff1a;减少不必要的…...

编程日记 2025/5/1 9:03:18

Linux -- 操作系统

一、冯•诺依曼体系结构 1、概念 # 在计算机发展历程中&#xff0c;核心作用就是解决人类问题。为了实现这一目标&#xff0c;计算机系统需具备特定结构和功能。 首先&#xff0c;计算机要配备输入设备&#xff0c;如鼠标、键盘、摄像头、话筒、磁盘&#xff08;文件读取&…...

编程日记 2025/5/1 9:02:16

（初探）强化学习路径规划的理论基础与代码实现

一、强化学习路径规划的核心理论 1.1 马尔可夫决策过程&#xff08;MDP&#xff09;框架 理论基础&#xff1a; 路径规划问题可以建模为马尔可夫决策过程&#xff08;Markov Decision Process, MDP&#xff09;&#xff0c;由五元组(S, A, P, R, γ)定义。其中&#xff0c;S&…...

编程日记 2025/5/1 9:02:12

分布式链路ID实现

实现原理 api入口或者网关处生成traceId&#xff0c;调用服务时优先检查是否头部带有traceId&#xff0c;有则复用&#xff0c;没有则生成 实现方式 处理api相关traceId 1.通过filter复用或者生成traceId&#xff0c;并且将traceId输入到响应头中 import java.io.IOExcept…...

编程日记 2025/5/1 9:01:10

Java @Transactional事物隔离级别和默认值详解

在 Java 开发中&#xff0c;Transactional 注解是 Spring 框架中用于管理事务的重要工具。它提供了多种配置选项&#xff0c;其中事务隔离级别是一个关键属性。本文将深入探讨 Transactional 注解的隔离级别默认值&#xff0c;并通过具体代码示例帮助你更好地理解和应用事务隔离…...

编程日记 2025/5/1 9:01:09

ComputeShader绘制全屏纯色纹理

参考 Getting Started With Compute Shaders In Unity 环境 Win10 Unity20194.40 全屏纯色纹理示例 使用ComputerShader逐个像素设置颜色 ComputeShader脚本 设置纹理颜色 #pragma kernel CSMainRWTexture2D<float4> Result;//纹理 half4 solidColor;//颜色[numth…...

编程日记 2025/5/1 9:01:08

关于 MCP 的理论知识学习

文章目录 1. 写在最前面2. 基本概念2.1 Why MCP2.1.1 大模型访问的局限2.1.2 过渡阶段—Function Call2.1.3 当前阶段— MCP 3. 碎碎念4. 参考资料 1. 写在最前面 最近有一项任务是写旧版本迁移到新版本的支持文档&#xff0c;文档的编写是借助于 cursor 帮忙写的。但是实现的…...

编程日记 2025/5/1 9:01:07

关于vue+iview中tabs嵌套及实际应用

最近在用vueiview框架做项目&#xff0c;在实际做项目中根据需求用到iview中的tabs标签页嵌套以及标签页增加删除功能。想着记录下来&#xff0c;以后可能会再用到。下面是页面。由于是公司的项目具体有些地方我会打码&#xff0c;不影响阅读&#xff01; 1607751577(1).jpg ta…...

编程日记 2025/5/1 9:00:05

26考研——输入/输出系统_I/O 方式_DMA 方式（7）

408答疑 文章目录 三、I/O 方式DMA 方式DMA 方式的特点DMA 控制器的组成DMA 的传送方式停止 CPU 访存周期挪用DMA 与 CPU 交替访存 示例分析DMA 的传送过程 DMA 方式和中断方式的区别 四、参考资料鲍鱼科技课件26王道考研书 三、I/O 方式 DMA 方式 DMA 方式是一种完全由硬件进…...

编程日记 2025/5/1 9:00:03

处理vue3热加载后axios的请求重复访问的问题

在请求拦截上加上判断&#xff0c;热加载时清空拦截器 if (import.meta.hot) { const interceptorsRe axios.interceptors.response.handlers; const interceptorsRq axios.interceptors.request.handlers; interceptorsRe .length 0; // 清空已有响应拦截器 interceptorsR…...

编程日记 2025/5/1 9:00:02

【教学类-102-21】蝴蝶三色图作品3——异型书蝴蝶“满格变形图”一页2图、一页4图

前期设计 将蝴蝶撑满整个单元格，满格变形图。确保蝴蝶图案最大化 【教学类-102-20】蝴蝶三色图作品2——卡纸蝴蝶“满格变形图”（滴颜料按压对称花纹、原图切边后变形放大到A4横版最大化）-CSDN博客文章浏览阅读572次，点赞7次，收藏3次。【教学类-102-20】蝴蝶三色图作品2…...

编程日记 2025/5/1 8:58:58

【昇腾】Benchmark

1. MindIE 服务化 1.1 环境准备 镜像传送门 参数说明&#xff1a; device用于挂载卡&#xff0c;下面的例子是挂载了8张卡 倒数第二行的镜像名称记得修改 docker run -itd --privileged --namemindie --nethost \--shm-size 500g \--device/dev/davinci0 \--device/dev/da…...

编程日记 2025/5/1 8:58:58

【阿里云大模型高级工程师ACP学习笔记】2.7 通过微调增强模型能力 (下篇)（⭐️⭐️⭐️ 重点章节！！！）

学习目标 特别说明：由于这一章节是2025年3月官方重点更新的部分，新增内容非常多，因此我不得不整理成上、下两篇，方便大家参考。 备考阿里云大模型高级工程师ACP认证时，深入钻研《2.7通过微调增强模型能力(下篇)》，期望达成以下目标： 掌握高效微调技术：深入理解预训练与…...

编程日记 2025/5/1 8:58:55

【RustDesk 】中继1：压力测试 Python 版 RustDesk 中继服务器

测试 Python 版 RustDesk 中继服务器 测试我们实现的中继服务器有几种方法，从简单到复杂依次如下： 1. 基本连接测试客户端 创建一个简单的测试客户端来验证中继服务器的基本功能： 2. 用两个测试客户端测试中继功能 要测试完整的中继功能，你需要运行两个客户端实例来模拟…...

编程日记 2025/5/1 8:57:51

MCP 自定义python实现server服务，支持离线调用和远程接口访问形式

参考： https://blog.csdn.net/lingding_cn/article/details/147355620 其他百炼、mcp服务网址支持链接访问 server服务代码： 出行酒店查询 mcp server代码编写参考：https://blog.csdn.net/weixin_42357472/article/details/146503660 api_mcp_server.py import pickle im…...

编程日记 2025/5/1 8:57:51

搭建PCDN大节点，服务器该怎么配

搭建P2P大节点时&#xff0c;服务器要怎么配呢&#xff1f;需要综合考虑硬件性能、网络带宽、存储能力、系统架构以及安全性等多个方面&#xff0c;以确保节点能够高效、稳定地运行。 一、硬件配置 CPU&#xff1a;选择高性能的多核处理器&#xff0c;以满足高并发处理需求。核…...

编程日记 2025/5/1 8:57:50

JavaScript的3D库有哪些？

JavaScript的3D库有哪些&#xff1f; 在3D开发领域&#xff0c;JavaScript提供了多种库和框架&#xff0c;使开发者能够在浏览器中创建丰富的3D体验。以下是一些流行的3D方面的JavaScript库&#xff1a; Three.js&#xff1a;这是最著名的用于创建3D图形的JavaScript库之一。它…...

编程日记 2025/5/1 8:57:49

如何解决matlab/octave画图legend图例颜色一样的问题？

预期目的&#xff1a; 本意想用legend在画图的时候把对应线段的颜色对应起来&#xff0c;实际按照如下代码运行得不到预期的结果。 x [1:10;11:20]y1 x.^2;y2 0.5.*x.^3plot(x,y1,r,x,y2,b);legend(y x^2,y x^3) 代码运行结果如下&#xff1a; 原因 是matlab /octave默…...

编程日记 2025/5/1 8:56:45

[第十五章][15.3.2 shellcode注入攻击]ret2shellcode+[NewStarCTF 公开赛赛道]ret2shellcode

1、[NewStarCTF 公开赛赛道]ret2shellcode IDA 反编译看伪代码&#xff1a; buf mmap((void *)0x233000, 0x1000uLL, 7, 34, -1, 0LL); 这里直接给了 buf 7 的权限&#xff0c;即可读可写可执行&#xff0c;那么 shellcode 肯定写到 buf 里 buf 的映射地址&#xff1a;0x23…...

编程日记 2025/5/1 8:55:42

边缘计算：数字世界的”末梢神经系统”解析-优雅草卓伊凡

边缘计算&#xff1a;数字世界的”末梢神经系统”解析-优雅草卓伊凡 一、边缘计算深度解析 1.1 边缘计算的定义与架构 边缘计算&#xff08;Edge Computing&#xff09;是一种分布式计算范式&#xff0c;它将数据处理能力从传统的集中式云数据中心推向网络边缘&#xff0c;更…...

编程日记 2025/5/1 8:55:41

基于CATIA参数化球体建模的自动化插件开发实践——NX建模之球体命令的参考与移植

引言​​ 在CATIA二次开发领域&#xff0c;Python因其灵活性和丰富的库支持逐渐成为高效工具开发的首选语言。本文将以笔者开发的​​CATIA球体自动化建模工具​​为例&#xff0c;参考NX软件中高效球体创建命令&#xff0c;深度解析基于PySide6 GUI框架与pycatia接口库的集成…...

编程日记 2025/5/1 8:53:38

ActiveMQ 可靠性保障：消息确认与重发机制（一）

引言 在当今分布式系统的架构中&#xff0c;消息中间件扮演着举足轻重的角色&#xff0c;而 ActiveMQ 作为一款广泛使用的开源消息中间件&#xff0c;凭借其对 JMS&#xff08;Java Message Service&#xff09;规范的支持、多种消息传输协议、丰富的消息模型&#xff08;如点对…...

编程日记 2025/5/1 8:53:37

麒麟、UOS系统在线打开word文件并提取修订痕迹

麒麟、UOS系统在线打开word文件并提取修订痕迹 查看本示例演示效果&#xff08;Windows版&#xff09; 查看本示例演示效果&#xff08;国产版&#xff09;本示例关键代码的编写位置&#xff0c;请参考“开始 - 快速上手”里您所使用的开发语言框架的最简集成代码 注意 本文中…...

编程日记 2025/5/1 8:52:35

Vue3笔记摘录

1.Vue3整体知识概览图 2.ref与reactive具体使用区别 2-1 基本类型处理 const count1 ref(0) 使用ref自动转化为数字类型const count2 reactive(0) 参数必须是对象类型 2-2 具体使用过程 // ref 处理对象&#xff08;自动解包&#xff09; const user ref({name: John,a…...

编程日记 2025/5/1 8:52:34

大力探索“AI·Life爱生活”项目峰会暨战略投资签约仪式成功举办

2025年4月26日&#xff0c;杭州西溪雷迪森大酒店内气氛热烈非凡&#xff0c;大力探索&#xff08;杭州&#xff09;科技有限公司主办的“大力探索项目峰会暨战略投资签约仪式”在此隆重开启。这场汇聚了数百位行业精英与企业代表的盛会&#xff0c;不仅是一场智慧的碰撞&#x…...

编程日记 2025/5/1 8:52:33

复刻低成本机械臂 SO-ARM100 材料齐活篇

视频讲解&#xff1a; 复刻低成本机械臂 SO-ARM100 材料齐活篇 打印件基本ok&#xff0c;总共12个&#xff0c;尴尬的是github又更新了so-101&#xff0c;不过看了下还好只是优化了走线和几个结构键&#xff0c;影响不大&#xff0c;大不了后面再重新打印&#xff08;有3d打印机…...

编程日记 2025/5/1 8:52:33

解读 AI绘画工作流ComfyUI Stable Diffusion

ComfyUI 是什么？图像工作流又是什么？ 认识ComfyUI 从名词术语来看： ComfyUI是一个基于节点流程的Stable Diffusion操作界面，通过自定义节点、拖拽连线实现精准的工作流定制，以完成更复杂的图像生成工作。 </...

编程日记 2025/5/1 8:51:29

北极星 新美团核销接口对接

美团吃相难看&#xff0c;东哥就应该干掉他 申请官方接口一般来说很难了 现在无非就是几种第三方开放出来的接口 按量收费&#xff0c;但是需要一次性充钱收首期的技术服务费 &#xff0c;然后按年收费就是我们技术自己解决的方式&#xff0c;方便便宜 ,代码齐全&#xff0c…...

编程日记 2025/5/1 8:51:28

理解数据库存储以及查询（集合）

理解数据库存储以及查询&#xff08;集合&#xff09; 基本概念定义 主键集合&#xff1a; 定义&#xff1a;主键集合是由数据库表中的主键组成的一个集合。主键是表中唯一标识每一行记录的属性&#xff08;或属性组合&#xff09;。 特性&#xff1a;主键集合包含表的主键属性…...

编程日记 2025/5/1 8:51:28

（Go Gin）Gin学习笔记（四）Gin的数据渲染和中间件的使用：数据渲染、返回JSON、浅.JSON()源码、中间件、Next()方法

1. 数据渲染 1.1 各种数据格式的响应 json、结构体、XML、YAML类似于java的properties、ProtoBuf 1.1.1 返回JSON package mainimport ("github.com/gin-gonic/gin""net/http" )func main() {r : gin.Default()r.POST("/demo", func(res *gi…...

编程日记 2025/5/1 8:50:26

机器视觉橡胶制品检测的应用

橡胶制品在生产过程中易出现划痕、气泡、缺料、毛边、杂质嵌入等多种缺陷&#xff0c;这些缺陷往往微小且随机分布&#xff0c;人工检测不仅耗时&#xff0c;漏检率也居高不下。尤其在汽车密封件、医疗硅胶制品等高端领域&#xff0c;微米级的缺陷都可能导致产品失效&#xff0…...

编程日记 2025/5/1 8:50:25

JavaScript：从JS的执行机制到location对象

一、JS执行机制 &#xff08;1&#xff09;JS是单线程 JavaScript语言的一大特点就是单线程&#xff0c;也就是同一时间只能做一件事。因为JavaScript是为了处理页面中的用户交互&#xff0c;以及制作DOM二诞生的。比如我们对某个DOM元素进行添加和删除操作&#xff0c;这个不…...

编程日记 2025/5/1 8:50:24

Sigmoid函数简介及其Python实现

文章目录 一、Sigmoid 函数简介1. 数学公式2. 关键特性3. 应用场景 二、Python 实现1. 使用 math 库 (适用于单个数值)2. 使用 numpy 库 (适用于数值、列表、数组、矩阵)3. 使用 scipy.special.expit (数值稳定) 三、小结 一、Sigmoid 函数简介 Sigmoid 函数&#xff08;也称为…...

编程日记 2025/5/1 8:50:24

全局事件总线EventBus的用法

全局事件总线 EventBus 在前端开发中是一种用于实现组件间通信的机制&#xff0c;适用于兄弟组件或跨层级组件间的数据传递。 1. 创建全局 EventBus 实例 在前端项目中&#xff0c;先创建一个全局的 EventBus 实例。在 Vue 中&#xff0c;可以通过创建一个新的 Vue 实例来实现…...

编程日记 2025/5/1 8:49:22

嵌入式Linux系统中的线程信号处理：策略与实践

在嵌入式Linux系统的开发中&#xff0c;多线程编程是提升系统性能和响应速度的重要手段。然而&#xff0c;多线程环境下的信号处理却是一个复杂且需要细致处理的问题。信号&#xff0c;作为进程间通信的一种机制&#xff0c;在嵌入式系统中常用于处理外部事件或中断。但在多线程…...

编程日记 2025/5/1 8:49:21

CCM/TCM在STM32中的含义和用途

CCM/TCM在STM32中的含义和用途 CCM&#xff08;Core Coupled Memory&#xff09;和TCM&#xff08;Tightly Coupled Memory&#xff09;是ARM架构中的特殊内存类型&#xff0c;它们都表示与CPU核心紧密耦合的内存区域。这些内存具有一些特殊特性&#xff0c;使其在某些应用场景…...

编程日记 2025/5/1 8:48:17

【网络原理】 《TCP/IP 协议深度剖析：从网络基础到协议核心》

文章目录 一、网络基础1. 认识IP地址概念作用格式组成子网掩码 2、认识Mac地址一跳一跳的网络数据传输 3. 网络设备及相关技术集线器&#xff1a;转发所有端口交换机&#xff1a;MAC地址转换表转发对应端口主机&#xff1a;网络分层从上到下封装主机&路由器&#xff1a;ARP…...

编程日记 2025/5/1 8:47:14