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

【面试题】在 CSS 中，实现一个 div 中的子 div 水平垂直居中

news 来源：原创 2025/7/16 9:27:14

1. 使用 Flexbox

特点：简单、直观，现代浏览器支持良好。
代码：

css

.parent {display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */height: 200px;           /* 父容器需有高度 */
}
.child {/* 子元素样式随意 */
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

实现简单，代码少。
动态适应子元素大小。缺点：
兼容性稍差（IE9 及以下不支持）。

2. 使用 Grid

特点：类似 Flexbox，但更强大，适合复杂布局。
代码：

css

.parent {display: grid;place-items: center; /* 同时实现水平和垂直居中 */height: 200px;
}
.child {/* 子元素样式随意 */
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

语法简洁，功能强大。
支持二维布局。缺点：
兼容性较 Flexbox 更差（IE11 需要前缀）。

3. 使用 position absolute 和 transform

特点：传统方法，兼容性好。
代码：

css

.parent {position: relative;height: 200px;
}
.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

兼容性极佳（支持老旧浏览器）。
不依赖父元素具体宽高。缺点：
需要知道子元素宽高变化时调整 transform。
代码稍复杂。

4. 使用 position absolute 和 margin auto

特点：需要固定子元素宽高。
代码：

css

.parent {position: relative;height: 200px;
}
.child {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 100px; /* 子元素需固定宽高 */height: 50px;
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

兼容性好。
不需要额外的计算。缺点：
子元素必须有明确的宽高。
不够灵活。

5. 使用 position absolute 和计算偏移

特点：手动计算偏移量，适合固定尺寸场景。
代码：

css

.parent {position: relative;height: 200px;
}
.child {position: absolute;top: 50%;left: 50%;width: 100px; /* 子元素需固定宽高 */height: 50px;margin-left: -50px; /* 宽度的一半 */margin-top: -25px;  /* 高度的一半 */
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

兼容性极好。
直观易懂。缺点：
需要手动计算宽高偏移。
子元素尺寸变化时需调整。

6. 使用 table-cell

特点：利用表格特性，较老式方法。
代码：

css

.parent {display: table-cell;vertical-align: middle;text-align: center;height: 200px;width: 200px; /* 需要宽度 */
}
.child {display: inline-block;
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

兼容性好（支持老浏览器）。缺点：
需要额外调整子元素为 inline-block。
不够现代化，维护性差。

7. 使用 line-height（单行文本居中）

特点：适合单行文本或简单内容。
代码：

css

.parent {height: 200px;line-height: 200px; /* 与高度一致 */text-align: center;
}
.child {display: inline-block;line-height: normal; /* 重置子元素行高 */
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

简单，适合文本居中。缺点：
只适用于单行内容，多行或复杂内容不适用。

总结对比

方法	优点	缺点	兼容性
Flexbox	简单、灵活	IE9+	较好
Grid	简洁、强大	IE11+（需前缀）	一般
position + transform	兼容性好、动态适应	代码稍复杂	极好
position + margin	兼容性好	需固定宽高	极好
position + 计算	直观、兼容性好	需手动计算	极好
table-cell	兼容老浏览器	不够现代	极好
line-height	简单（单行）	仅限单行内容	极好

【面试题】在 CSS 中，实现一个 div 中的子 div 水平垂直居中

1. 使用 Flexbox 特点：简单、直观，现代浏览器支持良好。代码： css .parent {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 200px; /* 父容器需有高度 */ } .child {…...

编程日记 2025/7/16 9:27:14

Electron 项目开机自启动

app.setLoginItemSettings 与 auto-launch 对比分析一、稳定性对比 1. app.setLoginItemSettings 优点：作为Electron官方API，有官方维护和支持缺点： 在某些Windows版本上存在已知问题部分Windows 10/11更新后可能失效在macOS权限更严格的…...

编程日记 2025/7/16 4:49:15

sql基础

本文多数内容属于个人基于网上资料的理解，如果有问题请告知修改，十分感谢定义百度百科：SQL (Structured Query Language) 是具有数据操纵和数据定义等多种功能的数据库语言，这种语言具有交互性特点，能为用户提供极…...

编程日记 2025/7/16 21:41:25

【C++数据库】SQLite3数据库连接与操作

注意：本文代码均为C++20标准下实现一、SQLite3库安装 1.1 安装库文件【工具】跨平台C++包管理利器vcpkg完全指南 vcpkg install sqlite3# 集成至系统目录，之前执行过此命令的无需再次执行 vcpkg integrate install1.2 验证代码在VS2022中新建控制台项目，测试代码如下…...

编程日记 2025/7/16 8:01:43

数据结构——Map和Set

1. 搜索树 1. 概念⼆叉搜索树⼜称⼆叉排序树，它可以是⼀棵空树，或者是具有以下性质的⼆叉树: • 若它的左⼦树不为空，则左⼦树上所有节点的值都⼩于根节点的值 • 若它的右⼦树不为空，则右⼦树上所有节点的值都⼤于根节点的值…...

编程日记 2025/7/16 1:38:42

zsh安装以及安装配置oh-my-zsh安装zsh-autosuggestionszsh-syntax-highlighting

下面是安装 zsh 及配置 oh‑my‑zsh 的详细步骤，适用于 Linux 和 macOS 环境： 1. 安装 zsh 1.1 在 macOS 上安装 zsh macOS 通常预装了 zsh，但建议升级到最新版本。你可以通过 Homebrew 来安装最新版： brew install zsh安装完成…...

编程日记 2025/7/16 21:48:46

VMware 安装 Ubuntu 实战分享

VMware 安装 Ubuntu 实战分享 VMware 是一款强大的虚拟机软件，广泛用于多操作系统环境的搭建。本文将详细介绍如何在 VMware 中安装 Ubuntu，并分享安装过程中的常见问题及解决方法。 1. 安装前的准备工作 (1) 系统要求主机操作系统：Windo…...

编程日记 2025/7/16 14:56:35

【SpringCloud】Eureka的使用

3. Eureka 3.1 Eureka 介绍 Eureka主要分为两个部分： EurekaServer: 作为注册中心Server端，向微服务应用程序提供服务注册，发现，健康检查等能力。 EurekaClient: 服务提供者，服务启动时，会向 EurekaS…...

编程日记 2025/7/16 4:50:30

Redis：List 类型内部实现、命令及应用场景

Redis 中的 List（列表）类型是一种有序的数据结构，它可以存储多个字符串元素，并且这些元素按照插入顺序排列。可以将它理解为一个双向链表，支持在链表的两端进行快速的插入和删除操作。它允许元素重复，并且可…...

编程日记 2025/7/16 9:24:28

Python 字符串正则表达式详解

Python 字符串正则表达式详解一、正则表达式核心语法元字符含义正确示例与说明常见错误修正.匹配任意字符（换行符除外）a.b → 匹配"acb"、“a1b”不匹配换行符（需用re.S模式）^匹配字符串开头^Hello → 匹配以"H…...

编程日记 2025/7/16 21:54:05

重试机制之指针退避策略算法

一、目的：随着重试次数增加，逐步延长重连等待时间，避免加重服务器负担。二、计算公式： 每次重试的延迟时间初始间隔 (退避基数 ^ 重试次数) 通常设置上限防止等待时间过长。 const delay Math.min(initialDelay * Math.pow…...

编程日记 2025/7/14 5:17:30

pyqt第一个窗口程序

文章目录官方文档相手动创建窗口程序designer创建ui布局官方文档相 https://doc.qt.io/qtforpython-6/ 手动创建窗口程序 import sys # 导入系统模块，用于获取命令行参数和系统功能 from PySide6.QtWidgets import QApplication, QLabel # 导入Qt组件&#x…...

编程日记 2025/7/16 19:28:10

一、PWM概述用来输出特定的模拟电压。二、PWM的输出三、例程一：单片机P34引脚输出1kHZ的频率 void Timer0Init(void);unsigned char PWMtt 0;void main(void) {P20XA0;P00X00;P20X80;P00XFF;Timer0Init();EA1;ET01;ET11;while(1);}void Timer0Init(void) //1…...

编程日记 2025/7/13 9:08:58

CSS学习笔记5——渐变属性+盒子模型阶段案例

目录通俗易懂的解释渐变的类型 1、线性渐变渐变过程 2、径向渐变如何理解CSS的径向渐变，以及其渐变属性通俗易懂的解释渐变属性 1. 形状（Shape） 2. 大小（Size） 3. 颜色停靠点（Color Sto…...

编程日记 2025/7/15 22:14:25

频谱分析仪的最大保持功能

专门应用于例如遥控器之类的，按一下，一瞬间出现的信号的测量。把仪器连接天线，观测空间中的一些信号，比如WIFI的信号，我们可以看到仪器接收到的信号其实是一直变化的，并不是每一次扫描都能扫到我们想要的这…...

编程日记 2025/7/10 19:57:35

权值线段树算法讲解及例题

算法思想普通的线段树一般是求区间之和或区间最值，所以这些线段树的每个节点的下标是原数组中的区间范围，每个节点存的是区间和或最值，而权值线段树的每个节点的下标是数组中元素的值，而权值线段树每个节点存的是当前元素出现的…...

编程日记 2025/7/16 17:55:01

3.26刷题（矩阵模拟专题）

1.59. 螺旋矩阵 II - 力扣（LeetCode） //方法一：变换方向法 class Solution { public:vector<vector<int>> generateMatrix(int n) {vector<vector<int>> dirct {{0, 1}, {1, 0}, {0, -1}, {-1, 0}};vector<vect…...

编程日记 2025/7/10 11:31:54

深入解析 JSON-RPC：从基础到高级应用（附调用示例）

在当今的软件开发领域，远程过程调用（RPC）技术是实现分布式系统间通信的关键手段之一。JSON-RPC，作为一种基于 JSON 数据格式的轻量级 RPC 协议，因其简洁性和高效性而备受青睐。本文将全面深入地探讨 JSON-RPC 的核心概…...

编程日记 2025/7/12 0:00:55

MAC环境给docker换源

2025-03-28 MAC环境给docker换源在官网下载docker ,dmg 文件参考： https://blog.csdn.net/qq_73162098/article/details/145014490 {"builder": {"gc": {"defaultKeepStorage": "20GB","enabled": true}},&q…...

编程日记 2025/6/28 6:37:57

Ollama及HuggingFace路径环境变量设置

日常经常用到这俩的一些环境变量，特记录下来，如有错误，还请指正。 1. Ollama路径环境变量设置 Ollama 模型路径变量名为OLLAMA_MODELS，设置示例： 变量名示例OLLAMA_MODELS C:\Users\Administrator\.ollama\models D…...

编程日记 2025/7/15 18:21:52

Redis | 基于 Redis 实现机器列表 Token 缓存的 Java 实现

关注：CodingTechWork 引言在分布式系统中，Token 缓存是一种常见的需求。它可以帮助我们快速验证用户身份，减少对数据库的频繁访问，提高系统的性能和响应速度。本文将介绍如何使用 Redis 来实现机器列表的 Token 缓存&#xff0c…...

编程日记 2025/7/15 20:53:00

Linux\CentOS解决OpenSSH和Nginx安全漏洞

前言由于有些服务器需要对公网提供服务、客户对于服务器安全比较重视，需要公司提供服务器安全报告。大多数服务器经过漏洞扫描之后、会出现很多软件低版本的漏洞，此时就需要升级软件的版本来解决这些漏洞问题。本篇文章记录升级软件过程。漏洞编号漏…...

编程日记 2025/7/8 4:32:43

ubuntu22.04 ROS2humble 路径文件

ROS2humble 路径文件 /opt/ros/humble/include/opt/ros/humble/lib/opt/ros/humble/share 下载ros2之后会有下面的文件，在/opt/ros/humble下 /opt/ros/humble/include C/C 头文件（.h, .hpp） /opt/ros/humble/lib 作用: 存放编译生成的二…...

编程日记 2025/7/10 14:45:38

zookeeper部署教程

在Linux系统中离线安装并配置ZooKeeper，可按以下步骤操作： 1. 准备安装包和依赖下载ZooKeeper：在有网络的环境下，前往Apache ZooKeeper官网下载所需的稳定版本，例如zookeeper-3.8.2.tar.gz。准备JDK：Zoo…...

编程日记 2025/7/14 1:46:59

生成信息提取的大型语言模型综述

摘要信息提取（IE）旨在从简单的自然语言文本中提取结构知识。最近，生成型大型语言模型（LLMs）在文本理解和生成方面表现出了显著的能力。因此，已经提出了许多基于生成范式将LLM集成到IE任务中的工作。为了对…...

编程日记 2025/7/11 5:23:56

霸王茶姬小程序(2025年1月版)任务脚本

脚本用于自动执行微信小程序霸王茶姬的日常签到和积分管理任务。脚本概述脚本设置了定时任务（cron），每天运行两次，主要用于自动签到以获取积分，积分可以用来换取优惠券。核心方法 constructor：构造函数，用于初始化网络请求的配置，设置了基础的 HTTP 请求头等。 logi…...

编程日记 2025/7/12 10:49:05

Maven中为什么有些依赖不用引入版本号

先给出一个例子： <parent><artifactId>sky-take-out</artifactId><groupId>com.sky</groupId><version>1.0-SNAPSHOT</version></parent><modelVersion>4.0.0</modelVersion><artifactId>sky-s…...

编程日记 2025/7/15 17:39:22

机器学习——集成学习框架(GBDT、XGBoost、LightGBM、CatBoost)、调参方法

一、集成学习框架对训练样本较少的结构化数据领域，Boosting算法仍然是常用项 XGBoost、CatBoost和LightGBM都是以决策树为基础的集成学习框架三个学习框架的发展是：XGBoost是在GBDT的基础上优化而来，CatBoost和LightGBM是在XGBoost的基础上…...

编程日记 2025/7/9 23:11:03

第十二章——位运算

按位的与& 若x的第i位和y的第i位都是1，那么（x&y）1，否则（x&y） 0 应用：希望让某一位或某些位为0 。取一个数中的一段。按位的或| 若x的第i位1或y的第i位1，那么&…...

编程日记 2025/7/7 6:32:29

陪伴就诊 APP 功能架构：如何通过特定模块筛选优秀陪诊师

在当今社会，随着人们对医疗服务品质需求的提升，陪诊师这一职业应运而生。然而，市场上陪诊师众多，水平参差不齐，如何筛选出优秀的陪诊师成了大家关注的焦点。而陪伴就诊 APP 的等级功能，为我们提供了一个有效…...

编程日记 2025/7/13 4:51:30

UI产品经理基础（六）：如何解决用户的质疑？

在需求调查中遇到用户质疑“不专业”或“不了解需求”，本质上是用户对产品经理的信任缺失或沟通鸿沟导致的。要化解这种质疑，需从专业能力展示、沟通方式优化、用户参与感提升三个维度切入，结合具体场景采取针对性策略。以下是系统化的解决方…...

编程日记 2025/7/15 22:47:27

【江协科技STM32】BKP备寄存器RTC实时时钟（学习笔记）

BKP备寄存器 BKP简介 BKP（Backup Registers）备份寄存器BKP可用于存储用户应用程序数据。当VDD（2.0~3.6V）电源被切断，他们仍然由VBAT（1.8~3.6V）维持供电。当系统在待机模式下被唤醒&#xff0…...

编程日记 2025/7/16 15:28:20

Flutter项目之table页面实现

目录： 1、首页页面index.dart（首页table页面）searchbar.dart (搜索页面)common_swiper.dart (轮播图)index_navigation.dart (导航区域)index_navigatorItem_list.dart (数组构造) 2、房屋推荐index_recommond.dart (房屋推荐区域)IndexRecom…...

编程日记 2025/7/12 14:56:05

Stable Virtual Camera 重新定义3D内容生成，解锁图像新维度；BatteryLife助力更精准预测电池寿命

在数字内容创作的激烈竞争中，Stability AI 正站在命运的十字路口。这家曾以 Stable Diffusion 引爆图像生成革命的公司，却因上层管理问题陷入了危机。近期，Stability AI 推出了 Stable Virtual Camera 模型，不知能否以一记重拳打破…...

编程日记 2025/7/15 4:52:35

物理安全——问答

目录 1、计算机的物理安全包含哪些内容 1. 设备保护 2. 访问控制 3. 电力与环境安全 4. 数据存储保护 5. 硬件防护 6. 监控与审计 7. 灾难恢复与应急响应 8. 拆卸与维修安全 2、物理安全有哪些需要关注的问题 1、计算机的物理安全包含哪些内容 1. 设备保护防止盗窃&…...

编程日记 2025/7/10 4:16:59

「查缺补漏」巩固你的 RabbitMQ 知识体系

1 MQ 存在的意义消息中间件一般主要用来做异步处理、应用解耦、流量削峰、日志处理等方面。 1.1 异步处理一个用户登陆网址注册，然后系统发短信跟邮件告知注册成功，一般有三种解决方法。串行方式，依次执行，问题是用户注册…...

编程日记 2025/7/6 6:36:31

前后前缀

一种特殊的前缀方法： 通过前后两次前缀，可以求出目的区间值例题1： 最大或值：2680. 最大或值 - 力扣（LeetCode）（贪心前缀） 贪心可知只让一个数变化最后或值最大，所以通过…...

编程日记 2025/7/10 11:22:36

C++细节知识for面试

1. linux上C程序可用的栈和堆大小分别是多少，为什么栈大小小于堆？ 1. 栈（Stack）大小栈默认为8MB，可修改。为什么是这个大小： 安全性：限制栈大小可防止无限递归或过深的函数调用导致内存…...

编程日记 2025/7/4 5:52:34

构建高可用性西门子Camstar服务守护者：异常监控与自愈实践

在智能制造领域，西门子Camstar作为领先的MES系统承载着关键生产业务。但在实际运维中，我们发现其服务常因数据库负载激增（如SQL阻塞链超时）或应用服务器资源耗尽（CPU峰值达90%以上）导致服务不可用。传统人工干预方式平均故障恢复时间长达47分钟，这对连续生产场景构成了严…...

编程日记 2025/7/9 14:46:02

DeepSeek-V3-250324: AI模型新突破，性能超越GPT-4.5

DeepSeek 于 3 月 25 日宣布完成 V3 模型的小版本升级，推出 DeepSeek-V3-250324 版本。新版本在推理能力、代码生成、中文写作及多模态任务上实现显著优化，尤其在数学和代码类评测中得分超越 GPT-4.5，引发行业高度关注。 DeepSeek-V3-250324…...

编程日记 2025/7/13 16:53:32

OSPF邻居状态机

OSPF（Open Shortest Path First）协议的邻接关系状态机描述了两台OSPF路由器之间建立和维护邻接关系的过程。以下是每个状态的简要描述： Down State（关闭状态） 描述：这是OSPF邻接关系的初始状态，…...

编程日记 2025/7/14 5:42:26

使用tensorflow实现线性回归

目录前言使用TensorFlow实现算法的基本套路:实战前言实现一个算法主要从以下三步入手: 找到这个算法的预测函数, 比如线性回归的预测函数形式为:y wx b, 找到这个算法的损失函数 , 比如线性回归算法的损失函数为最小二乘法找到让损失函数求得最小值的时候的系数, 这时一…...

编程日记 2025/7/10 0:10:39

CF每日5题Day4（1400）

好困，感觉很累，今天想赶紧写完题早睡。睡眠不足感觉做题都慢了。 1- 1761C 构造 void solve(){int n;cin>>n;vector<vector<int>>a(n1);forr(i,1,n){//保证每个集合不同a[i].push_back(i);}forr(i,1,n){string s;cin>>s;forr(…...

编程日记 2025/7/15 10:39:43

Vala 编程语言教程-继承

继承‌ 在 Vala 中，一个类可以继承自 ‌一个或零个‌ 其他类。尽管实际开发中通常继承一个类（不同于 Java 等语言的隐式继承机制），但 Vala 并不强制要求必须继承。当定义继承自其他类的子类时，子类的实例与父…...

编程日记 2025/7/13 23:06:48

CLion下载安装（Windows11）

目录 CLion工具下载安装其他 CLion CLion-2024.1.4.exe 工具系统：Windows 11 下载 1.通过百度网盘分享的文件：CLion-2024.1.4.exe 链接：https://pan.baidu.com/s/1-zH0rZPCZtQ60IqdHA7Cew?pwdux5a 提取码：ux5a 安装打开…...

编程日记 2025/7/13 1:06:10

QEMU源码全解析 —— 块设备虚拟化（12）

接前一篇文章：QEMU源码全解析 —— 块设备虚拟化（11）本文内容参考：《趣谈Linux操作系统》 —— 刘超，极客时间《QEMU/KVM源码解析与应用》 —— 李强，机械工业出版社特此致谢！ QEMU初始化阶段的块设备虚拟化从模板生成类和类的实例化本回继续解析QEMU类Java反…...

编程日记 2025/7/14 8:48:08

如何使用VS中的Android Game Development Extension (AGDE) 来查看安卓 Logcat 日志

一、首先按照以下指引中的第1、2步骤，安装一下 AGDE ，AGDE 的安装包可以在官网上找到。 UE4 使用AndroidGameDevelopmentExtension（AGDE）对安卓客户端做“断点调试”与“代码热更”-CSDN博客在执行第二步骤前，记得…...

编程日记 2025/7/11 1:09:13

Z字形变换

将一个给定字符串 s 根据给定的行数 numRows ，以从上往下、从左到右进行 Z 字形排列。比如输入字符串为 "PAYPALISHIRING" 行数为 3 时，排列如下： P A H N A P L S I I G Y I R 之后，你的输出需要从左往右…...

编程日记 2025/7/15 18:17:32

跟着尚硅谷学vue-day1

前言：企业多用vue3,但是考虑到时间较充足,先学vue2,学vue3较为方便。 1.vue是什么？ 一套用于构建用户界面的渐进式Javascript 框架构建用户界面：数据->界面渐进式：Vue可以自底向上逐层的应用简单应用: 只需一个轻量小…...

编程日记 2025/7/11 10:48:22

平板实现 adb connect 连接的步骤

1. 检查设备的开发者选项确保平板设备已开启开发者模式，并启用了USB调试。 2. 检查设备和电脑的网络连接确保平板和电脑连接到同一个Wi-Fi网络，确认设备的 IP 地址是否正确。通过 ping 命令测试： ping 192.168.3.243. 通过USB线进行初…...

编程日记 2025/7/15 23:49:17

1. 使用 Flexbox

2. 使用 Grid

3. 使用 position absolute 和 transform

4. 使用 position absolute 和 margin auto

5. 使用 position absolute 和计算偏移

6. 使用 table-cell

7. 使用 line-height（单行文本居中）

相关文章：