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

CSS 中实现 div 居中有以下几种常用方法

news 来源：原创 2025/7/29 1:42:33

在 CSS 中实现 div 居中有以下几种常用方法，具体取决于需要 水平居中、垂直居中 还是 两者兼具。以下是详细解决方案：

一、水平居中（Horizontal Centering）

1. 行内块元素（Inline-Block）

2. 固定宽度 + margin: auto

3. Flexbox 弹性布局

二、垂直居中（Vertical Centering）

1. 绝对定位 + 变换（Transform）

2. Flexbox 弹性布局

3. Grid 网格布局

三、水平 + 垂直双居中（Perfect Center）

1. Flexbox（推荐）

2. Grid 网格布局

3. 绝对定位 + 变换

四、其他场景

1. 行内元素（Text/Inline）居中

2. 多行文本垂直居中

关键点总结

一、水平居中（Horizontal Centering）

1. 行内块元素（Inline-Block）

css

.parent {text-align: center; /* 父容器设置 */
}
.child {display: inline-block; /* 子元素转为行内块 */
}

2. 固定宽度 + `margin: auto`

css

.child {width: 300px;margin: 0 auto; /* 左右外边距自动分配 */
}

3. Flexbox 弹性布局

css

.parent {display: flex;justify-content: center; /* 水平居中 */
}

二、垂直居中（Vertical Centering）

1. 绝对定位 + 变换（Transform）

css

.parent {position: relative; /* 父容器相对定位 */
}
.child {position: absolute;top: 50%;transform: translateY(-50%); /* 上移自身高度的50% */
}

2. Flexbox 弹性布局

css

.parent {display: flex;align-items: center; /* 垂直居中 */
}

3. Grid 网格布局

css

.parent {display: grid;place-items: center; /* 垂直水平居中 */
}

三、水平 + 垂直双居中（Perfect Center）

1. Flexbox（推荐）

css

.parent {display: flex;justify-content: center; /* 水平 */align-items: center;     /* 垂直 */height: 100vh;           /* 父容器需有高度 */
}

2. Grid 网格布局

css

.parent {display: grid;place-items: center; /* 一步到位 */height: 100vh;
}

3. 绝对定位 + 变换

css

.parent {position: relative;height: 100vh;
}
.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 上移左移自身尺寸的50% */
}

四、其他场景

1. 行内元素（Text/Inline）居中

css

.parent {text-align: center; /* 直接继承 */
}

2. 多行文本垂直居中

css

.parent {display: flex;align-items: center;line-height: 1.5; /* 与容器高度一致 */
}

关键点总结

方法	适用场景	优点	缺点
`margin: auto`	固定宽度元素水平居中	简单	需明确宽度
Flexbox	现代布局，支持动态尺寸	灵活，代码简洁	兼容性（IE10+）
Grid	二维布局，一步到位	强大，适合复杂设计	兼容性（IE不支持）
绝对定位 + 变换	未知尺寸元素居中	无需固定尺寸	需父容器定位

推荐优先使用 Flexbox 或 Grid，它们更符合现代 Web 开发需求，且代码简洁易维护。

CSS 中实现 div 居中有以下几种常用方法

在 CSS 中实现 div 居中有以下几种常用方法，具体取决于需要水平居中、垂直居中还是两者兼具。以下是详细解决方案： 目录一、水平居中（Horizontal Centering） 1. 行内块元素（Inline-Blo…...

编程日记 2025/7/29 1:42:33

win11修改文件后缀名

一、问题描述 win11系统中，直接添加.py后缀后仍然是txt文本文件二、处理方式： 点击上方三个小点点击“选项”按钮点击“查看”取消“隐藏已知文件类型的扩展名”选项点击“应用” 此时，“.txt”文件后缀显示出来了。将txt删去&#xff0c…...

编程日记 2025/7/27 13:46:27

【数据结构和算法】3. 排序算法

本文根据数据结构和算法入门视频记录文章目录 1. 排序算法2. 插入排序 Insertion Sort2.1 概念2.2 具体步骤2.3 Java 实现2.4 复杂度分析 3. 快排 QuickSort3.1 概念3.2 具体步骤3.3 Java实现3.4 复杂度分析 4. 归并排序 MergeSort4.1 概念4.2 递归具体步骤4.3 Java实现4.4…...

编程日记 2025/7/27 13:46:26

k8s之 kube-prometheus监控

Kubernetes 中的 kube-prometheus 是一个基于 Prometheus Operator 的完整监控解决方案，它集成了 Prometheus、Alertmanager、Grafana 以及一系列预定义的监控规则和仪表盘，专为 Kubernetes 集群设计。一、核心组件介绍 Prometheus Operator &#xf…...

编程日记 2025/7/27 13:46:24

Docker Compose 和 Kubernetes（k8s）区别

前言：Docker Compose 和 Kubernetes（k8s）是容器化技术中两个常用的工具，但它们的定位、功能和适用场景有显著区别。以下是两者的核心对比： 1. 定位与目标特性 Docker Compose Kubernet…...

编程日记 2025/7/27 13:46:22

【SpringBoot】HttpServletRequest获取使用及失效问题（包含@Async异步执行方案）

目录 1. 在 Controller 方法中作为参数注入 2.使用 RequestContextHolder （1）失效问题 （2）解决方案一： （3）解决方案二： 3、使用AutoWrite自动注入HttpServletRequest 跨线程调…...

编程日记 2025/7/27 13:46:20

【Easylive】为什么需要手动转换 feign.Response 到 HttpServletResponse

【Easylive】项目常见问题解答（自用&持续更新中…） 汇总版为什么需要手动转换 feign.Response 到 HttpServletResponse？ feign.Response 是 Feign 客户端调用远程服务后返回的原始 HTTP 响应对象，而 HttpServletResponse 是…...

编程日记 2025/7/26 15:32:43

C语言交换函数:为什么必须用指针传递参数?

写一个简单交换两个变量值的函数,我们要理解C语言中参数传递的机制. C语言中的函数参数默认是按值传递,也就是说,如果我写一个函数,如 void swap(int a,int b) {int tmp a;a b;b tmp; }然后在函数内部交换a,b的值,这不会影响到函数外部的变量,因为传递的是值的副本. 就像…...

编程日记 2025/7/27 13:46:17

C#+Visual Studio 2022为AutoCAD 2022开发插件并显示在Ribbon选项卡

1.插件功能开发 （1）建立C#类库项目，添加必要引用，都是autocad二次开发相关的，要注意对引用的库修改其“复制文件”属性为false (2)项目调试使用“属性”打开“启用外部程序”，指定为机器上autocad2022的a…...

编程日记 2025/7/27 13:46:15

全景VR是什么？全景VR有什么热门用途？

全景VR的概念与技术特点全景VR，即虚拟现实全景，是新型的视觉展示技术。通过拍摄和构建三维模拟环境，使浏览者能够通过网络获得三维立体的空间感觉，仿佛身临其境。全景VR技术的核心在于360全景图像的捕捉和展示，它允许…...

编程日记 2025/7/29 1:05:26

美创科技20周年庆典顺利举行

2025年4月19日美创科技成立20周年 “稳健前行二十载，创新共赢新未来” 美创科技周年庆典在杭州总部顺利举行美创科技20周年庆典精彩视频回顾 （点击查看美创科技20周年庆典精彩视频回顾） CEO致辞 20周年再出发，开启新增长周期…...

编程日记 2025/7/29 10:50:50

学习笔记二十二—— 并发五大常见陷阱

⚠️ 并发五大常见陷阱目录数据竞争 (Data Race)死锁 (Deadlock)竞态条件 & 饿死现象 (Race Condition & Starvation)悬挂指针 (Dangling Pointer)重复释放 (Double Free)开发自查清单 1. 数据竞争 (Data Race) 专业定义两个及以上线程在缺乏同步的情况下同时访问同…...

编程日记 2025/7/27 13:46:09

精益数据分析（10/126）：深度剖析数据指标，驱动创业决策

精益数据分析（10/126）：深度剖析数据指标，驱动创业决策在创业的旅程中，数据指标是我们把握方向的关键工具。今天，我想和大家一起深入学习《精益数据分析》中关于数据指标的知识，共同探索如何利…...

编程日记 2025/7/27 8:55:55

冒泡排序详解

void bubbleSort(std::vector& arr) { int n arr.size(); for (int i 0; i < n-1 ; i) { // 需要 n-1 轮原理是 3个元素两轮比交即可 10个元素9轮比较即可 bool swapped false; // 用于优化，检测是否发生交换 for (int j 0; j < n - i -1 ; j) { //…...

编程日记 2025/7/29 15:16:16

小刚说C语言刷题——1039 求三个数的最大数

1.题目描述已知有三个不等的数，将其中的最大数找出来。输入输入只有一行，包括3个整数。之间用一个空格分开。输出输出只有一行（这意味着末尾有一个回车符号），包括1个整数。样例输入 1 5 8 输出 8 2.…...

编程日记 2025/7/27 13:46:04

【日志体系】ELK Stack与云原生日志服务

IaaS日志体系：ELK Stack与云原生日志服务一、技术演进的双重脉络二、架构设计的范式差异三、关键技术突破解析四、前沿发展与行业实践当某国际电商平台在"黑色星期五"遭遇每秒百万级日志洪峰时，其运维团队通过混合日志架构实现全链路追踪&am…...

编程日记 2025/7/27 13:46:02

spark和hadoop区别联系

区别设计理念 Hadoop：主要解决大规模数据的存储和处理问题，其核心是 Hadoop 分布式文件系统（HDFS）和 MapReduce 计算模型。HDFS 用于存储大规模数据，MapReduce 用于处理数据，它将数据处理过程分为 Map 和…...

编程日记 2025/7/27 13:46:00

240422 leetcode exercises jarringslee 文章目录 240422 leetcode exercises[237. 删除链表中的节点](https://leetcode.cn/problems/delete-node-in-a-linked-list/)🔁节点覆盖法 [392. 判断子序列](https://leetcode.cn/problems/is-subsequence/)🔁…...

编程日记 2025/7/27 13:45:58

【上位机——MFC】菜单类与工具栏

菜单类 CMenu，封装了关于菜单的各种操作成员函数，另外还封装了一个非常重要的成员变量m_hMenu(菜单句柄) 菜单使用添加菜单资源加载菜单工具栏相关类 CToolBarCtrl-》父类是CWnd，封装了关于工具栏控件的各种操作。 CToolBar-》父类是CC…...

编程日记 2025/7/27 12:42:56

Spark-SQL连接Hive总结及实验

一、核心模式与配置要点 1. 内嵌Hive 无需额外配置，直接使用，但生产环境中几乎不使用。 2. 外部Hive（spark-shell连接） 配置文件：将hive-site.xml（修改数据库连接为node01）、core-site.xml、…...

编程日记 2025/7/29 15:16:50

20.3 使用技巧9

编程日记 2025/7/27 13:45:57

逻辑回归（Logistic Regression）

逻辑回归（Logistic Regression） 原理通过 Sigmoid函数（ σ ( z ) 1 1 e − z σ(z) \frac{1}{1e^{-z}} σ(z)1e−z1）将线性回归输出 z w T x b z w^Tx b zwTxb 映射到 [0,1] 区间输出值表示样本属于正类的概率&#…...

编程日记 2025/7/27 11:47:59

weblogic12 部署war包项目运行报错

问题表现 weblogic12 部署war包项目成功，运行启动成功。但是在使用此项目的时候，点击任何功能都会报错，部分报错如下： at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.…...

编程日记 2025/7/27 13:45:52

重新定义户外防护！基于DeepSeek的智能展开伞棚系统技术深度解析

从“手动操作”到“感知决策”，AI重构城市空间弹性全球极端天气事件频发，传统伞棚依赖人工展开/收纳，存在响应滞后（暴雨突袭时展开需3-5分钟）、抗风能力弱（8级风损毁率超60%）、空间利用率低等痛…...

编程日记 2025/7/28 16:30:36

Android15沉浸式界面顶部有问题

Android15沉浸式界面顶部有问题往往开发人员的手机没这么高级，客户或者老板的手机是Android15的。我明明就设了状态栏透明，我的手机也没问题。但Android15是有问题的。先看下有问题的界面： 解决方案： 处理1： if (…...

编程日记 2025/7/27 13:45:51

git比较不同分支的不同提交文件差异

背景：只想比较某2个分支的某2次提交的差异，不需要带上父提交。以commitA为基准，用commitB去比较差异直接上代码： #!/bin/bashcommitAd347dad9f25fb17db89eadcec7ea0f1bacbf7d29 commitBa6cc0c1a863b5c56d5f48bff396e4cd6966e…...

编程日记 2025/7/29 15:13:52

ADB -＞ pull指令推送电脑文件到手机上

ADB Push命令在Android开发中，ADB的push命令用于将文件从电脑传输到Android设备上，是开发和测试过程中的重要工具基本语法 adb push <本地文件路径> <设备目标路径><本地文件路径>：必需参数，指定要推送的本…...

编程日记 2025/7/27 13:45:47

compat-openssl10和libnsl下载安装

在麒麟系统（如银河麒麟）中，compat-openssl10 和 libnsl 是一些软件（如 MySQL、Oracle 等）的依赖包，用于提供兼容性支持。以下是它们的下载方法： 1. 下载 compat-openssl10 compat-openssl10 是…...

编程日记 2025/7/27 13:45:45

‌射频功率放大器的核心工作机制与组件设计

以下是关于射频功率放大器工作原理的详细说明： 射频功率放大器（RF PA）是无线通信系统的核心组件，其功能基于能量转换与信号放大技术。它通过精确的能量控制与信号处理，将低功率射频信号转化为高功率输出，支…...

编程日记 2025/7/28 22:20:44

制作一款打飞机游戏12：初稿原型

当前进展 ‌任务回顾‌：在之前，我们做了大量的规划和原型设计。我们创建了关卡，添加了侧向滚动和BOSS模式背景重复，还制作了一个紧凑的瓦片集。‌原型完成‌：我们完成了五个原型，基本实现了飞机飞行、滚动…...

编程日记 2025/7/29 2:37:15

C语言高频面试题——指针数组和数组指针

指针数组和数组指针是 C/C 中容易混淆的两个概念，以下是详细对比： 1. 指针数组（Array of Pointers） 定义：一个数组，其元素是指针类型。语法：type* arr[元素个数]; 例如：int* ptr_a…...

编程日记 2025/7/27 15:53:55

爱普生TG-5006CG成为提升5G RedCap时钟同步精度的理想选择

在 5G 通信技术持续演进的进程中,5G RedCap（Reduced Capability,即降低能力）是5G技术中针对物联网场景优化的一种轻量化标准。它通过降低终端带宽、简化天线配置和调制方式等手段，大幅降低了终端设备的成本和功耗，同时继承了5G NR…...

编程日记 2025/7/29 13:06:13

用Mac M4构建多架构Docker镜像指南

使用Mac M4构建多架构Docker镜像指南解决问题：WARNING: The requested image‘s platform (linux/amd64) does not match the detected host platform 📌 重点：为什么需要双栈架构镜像？ 双栈架构镜像（同时支持ARM64和…...

编程日记 2025/7/27 5:01:05

PCB原理图解析(炸鸡派为例)

晶振这是外部晶振的原理图。 32.768kHz 的晶振，常用于实时时钟（RTC）电路，因为它的频率恰好是一天的分数（32768 秒），便于实现秒计数。 C25 和 C24：两个 12pF 的电容，用于…...

编程日记 2025/7/29 1:42:18

GPU高效利用率实战揭秘：蓝耘元生代VS传统云平台的降维打击

文章目录一、前言：AI算力革命与蓝耘元生代的崛起二、蓝耘元生代智算云核心架构解析2.1 技术基石：Kubernetes原生云与蜂巢式资源网络关键创新点： 2.2 核心功能模块三、蓝耘元生代快速入门指南3.1 注册与资源申请3.2 实战案例：部署…...

编程日记 2025/7/27 15:53:48

EXCEL学习

一、基本计算求和 SUM(区域)：计算区域内数值总和。示例：SUM(A1:A10) 计算A1到A10的和。平均值 AVERAGE(区域)：计算区域内数值的平均值。示例：AVERAGE(B1:B10) 计算B1到B10的平均值。计数 COUNT(区域)：统计区域内非…...

编程日记 2025/7/27 15:53:46

PyTorch 线性回归详解：模型定义、保存、加载与网络结构

目录前言一、pytorch框架线性回归1.1 pytorch模型的定义1.2 nn.Sequential()1.2.1 nn.Linear1.2.2 nn.Sequential 1.3 nn.ModuleList()1.4 nn.ModuleDict()1.5 nn.Module二、pytorch模型的保存2.1 保存模型的权重和其他参数2.1.1 torch.save()保存字典总结前言书接上文自…...

编程日记 2025/7/29 15:14:56

基础服务系列-Jupyter Notebook 支持JavaScript

IJavascript is a Javascript kernel for the Jupyter notebook. npm install npm i -g ijavascript 报以上错误，执行以下命令。 npm i -g ijavascript --unsafe-perm 说明：npm会有生命周期，某个包会有生命周期来执行一些东西，…...

编程日记 2025/7/27 15:53:43

LabVIEW数据采集与传感系统

开发了一个基于LabVIEW的智能数据采集系统，该系统主要通过单片机与LabVIEW软件协同工作，实现对多通道低频传感器信号的有效采集、处理与显示。系统的设计旨在提高数据采集的准确性和效率，适用于各种需要高精度和低成本解决方案的工业场合。项…...

编程日记 2025/7/27 15:53:41

如何编写单元测试

一.如何编写单元测试下面我们以 fetchEnv 方法作为案例，编写一套完整的单元测试用例供读者参考编写 fetchEnv 方法 ./src/utils/fetchEnv.ts 文件 /*** 环境参数枚举*/enum IEnvEnum {DEV dev, // 开发TEST test, // 测试PRE pre, // 预发PROD prod, // 生…...

编程日记 2025/7/26 18:39:28

【网络编程】从零开始彻底了解网络编程(三)

本篇博客给大家带来的是网络编程的知识点. 🐎文章专栏: JavaEE初阶 🚀若有问题评论区见 ❤ 欢迎大家点赞评论收藏分享如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅🚀 要开心要快乐顺便进步 TCP流…...

编程日记 2025/7/27 1:31:36

华为OD机试真题——数据分类（2025A卷：100分）Java/python/JavaScript/C++/C语言/GO六种最佳实现

2025 A卷 100分题型本文涵盖详细的问题分析、解题思路、代码实现、代码详解、测试用例以及综合分析； 并提供Java、python、JavaScript、C、C语言、GO六种语言的最佳实现方式！ 本文收录于专栏：《2025华为OD真题目录全流程解析/备考攻略/经验…...

编程日记 2025/7/27 15:53:36

3步拆解Linux内核源码的思维模型

3步拆解Linux内核源码的思维模型 ——从“不敢碰”到“庖丁解牛” 一、第一步：资料收集与框架搭建——像拼图一样找到“地图” 初看Linux内核源码的人，往往会被其千万行代码淹没。但正如登山前需要地形图，阅读内核前必须构建认知框架。 1…...

编程日记 2025/7/27 15:53:35

图像预处理-图像轮廓特征查找

其实就是外接轮廓，有了轮廓点就可以找到最上、最下、最左、最右的四个坐标（因为有xmin,xmax,ymin,ymax）。就可以绘制出矩形。一.外接矩形 cv.boundingRect(轮廓点) - 返回x,y,w,h，传入一个轮廓的轮廓点，若有多个轮廓需…...

编程日记 2025/7/27 15:53:33

布尔差分法解析：从逻辑导数到电路优化

#布尔差分法解析：从逻辑导数到电路优化一、背景数学知识：布尔代数基础布尔变量与函数在布尔代数中，变量的取值只有 0（表示假）和 1（表示真）。例如，一个布尔变量 x 可以取 0 或 1。…...

编程日记 2025/7/29 9:36:38

【NVIDIA】Isaac Sim 4.5.0 加载 Franka 机械臂

目录一、NVIDIA Isaac Sim 4.5.0二、Isaac Sim 4.5.0 核心特性解析1. 基于 Omniverse 的跨平台仿真框架2. 模块化机器人开发架构3. 面向AI的强化学习支持三、Isaac Sim 4.5.0 仿真环境搭建四、加载 Franka 机械臂1. Python源码2. 代码解析（按执行流程）…...

编程日记 2025/7/27 15:53:30