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

CSS【详解】居中对齐（水平居中 vs 垂直居中）

news 2025/8/24 22:41:45

水平居中

内部块级元素的宽度要小于容器(父元素)

方案一：文本居中对齐（内联元素）

限制条件：仅用于内联元素 display:inline 和 display: inline-block;

给容器添加样式

text-align:center

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;text-align: center;}.item {display: inline-block;width: 400px;background: yellow;}</style></head><body><div class="box"><span>水平居中 -- display: inline</span></div><div class="box"><div class="item">水平居中 -- display: inline-block</div></div></body>
</html>

方案二：自动外边距（块级元素）

限制条件：仅用于块级元素 display:block;

给内部元素添加样式

margin: auto

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;}.item {margin: auto;width: 300px;background: yellow;}</style></head><body><div class="box"><div class="item">水平居中 -- 块级元素 display:block</div></div></body>
</html>

方案三：flex布局【推荐】

给容器添加样式

display: flex;
justify-content: center;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;display: flex;justify-content: center;}.item {width: 400px;background: yellow;}</style></head><body><div class="box"><span>水平居中 -- flex布局 display: inline</span></div><div class="box"><div class="item">水平居中 -- flex布局 display: block</div></div></body>
</html>

方案四：子绝父相 + transform （CSS3）

限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left: 50%;
transform: translate(-50%, 0);

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 50px;position: relative;}.item {background-color: yellow;position: absolute;left: 50%;transform: translate(-50%, 0);}</style></head><body><div class="box"><span class="item">水平居中 -- 子绝父相 + transform</span></div></body>
</html>

方案五：子绝父相 + 自动外边距（指定宽度）

限制条件：内部元素需限定宽度

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left: 0;
right: 0;
margin: auto;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 50px;position: relative;}.item {background-color: yellow;position: absolute;left: 0;right: 0;margin: auto;width: 300px;}</style></head><body><div class="box"><span class="item">水平居中 -- 子绝父相 + 自动外边距</span></div></body>
</html>

方案六：子绝父相 + 负外边距（知道宽度 + 宽度计算）

限制条件：需知道内部元素的宽度（无法预知宽度的内联元素和未知宽度的块级元素都不适用）

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left:50%;
margin-left:-内部元素宽度的一半

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {width: 400px;background: yellow;position: absolute;left: 50%;margin-left: -200px;}</style></head><body><div class="box"><div class="item">水平居中 -- 绝对定位元素 position:absolute</div></div></body>
</html>

垂直居中

内部块级元素的高度要小于容器(父元素)

方案一：行高 = 容器高度（单行内联元素）

限制条件：仅用于单行内联元素 display:inline 和 display: inline-block;

给容器添加样式

 height: 100px;line-height: 100px;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;height: 100px;line-height: 100px;}</style></head><body><div class="box"><span class="item">垂直居中 -- 内联元素 display:inline</span></div></body>
</html>

方案二：flex布局【推荐】

给容器添加样式

display: flex;
align-items: center;

方案三：子绝父相 + transform（CSS3）

限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 50%;
transform: translate(0, -50%);

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 50%;transform: translate(0, -50%);background-color: yellow;}</style></head><body><div class="box"><div class="item">垂直居中 -- 子绝父相 transform</div></div></body>
</html>

方案四：子绝父相 + 自动外边距（指定高度）

限制条件：内部元素需限定高度

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 0;
bottom: 0;
margin: auto;

内联元素也有效，因为内联元素绝对定位后，display 会变为 block

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 0;bottom: 0;margin: auto;background-color: yellow;height: 50px;}</style></head><body><div class="box"><span class="item">垂直居中 -- 子绝父相 + 自动外边距</span></div></body>
</html>

方案五：子绝父相 + 负外边距（知道高度 + 高度计算）

限制条件：需知道内部元素的高度

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 50%;
margin-top: -内部元素高度的一半;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 50%;margin-top: -25px;height: 50px;background-color: yellow;}</style></head><body><div class="box"><span class="item">垂直居中 -- 子绝父相 + 负外边距</span></div></body>
</html>

水平垂直居中

参考上文分别实现水平居中和垂直居中即可，常用方案如下：

方案一：flex布局【推荐】

给容器添加样式

display: flex;
justify-content: center;
align-items: center;

方案二：子绝父相 + transform （CSS3）

限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

方案三：子绝父相 + 自动外边距（指定高度和宽度）

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

方案四：子绝父相 + 负外边距（知道宽度和高度 + 宽度和高度计算）

限制条件：需知道内部元素的宽度和高度
给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left:50%;
margin-left:-内部元素宽度的一半;
top: 50%;
margin-top: -内部元素高度的一半;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 100px;position: relative;}.item {background-color: yellow;position: absolute;left: 50%;margin-left: -150px;top: 50%;margin-top: -25px;width: 300px;height: 50px;}</style></head><body><div class="box"><span class="item">水平垂直居中 -- 子绝父相 + 负外边距</span></div></body>
</html>

CSS【详解】居中对齐（水平居中 vs 垂直居中）

水平居中内部块级元素的宽度要小于容器(父元素) 方案一：文本居中对齐（内联元素） 限制条件：仅用于内联元素 display:inline 和 display: inline-block; 给容器添加样式 text-align:center<!DOCTYPE html> <html lang&q…...

编程日记 2024/3/2 10:02:30

【排序算法】基数排序

一：基本概念 1.1 基数排序(桶排序)介绍基数排序（radix sort）属于“分配式排序”（distribution sort），又称“桶子法”（bucket sort）或bin sort，顾名思义，它是…...

编程日记 2024/3/2 10:00:28

解释存储过程和函数的区别，以及它们在MySQL中的用途。如何创建和使用存储过程和函数?

解释存储过程和函数的区别，以及它们在MySQL中的用途。存储过程和函数在MySQL中的区别及用途区别： 返回值： 函数：必须有一个返回值，这可以是一个标量值或一个表。如果没有明确的RETURN语句，函数将返回N…...

编程日记 2024/3/2 9:59:27

【GPU驱动开发】-GPU架构简介

前言不必害怕未知，无需恐惧犯错，做一个Creator！ GPU（Graphics Processing Unit，图形处理单元）是一种专门用于处理图形和并行计算的处理器。GPU系统架构通常包括硬件和软件层面的组件。一、总体流程应…...

编程日记 2024/3/2 9:56:25

m位数问题(c++题解)

题目描述考官只给两个整数n和m（1 < n < 8，1< m <5），要求选手从1,2,…,n中取出m个数字，组成一个m位整数，统计所有的m位整数中一共有多少个素数。如n3,m2时，符合条件的整数有&…...

编程日记 2024/3/2 9:55:24

洛谷P1331海战

题目背景在峰会期间，武装部队得处于高度戒备。警察将监视每一条大街，军队将保卫建筑物，领空将布满了 F-2003 飞机。此外，巡洋船只和舰队将被派去保护海岸线。不幸的是，因为种种原因，国防海军部仅有很少…...

编程日记 2024/3/2 9:54:23

如何利用Flutter来写后端服务端应用

前言 Flutter是谷歌推出的一款跨平台开发框架，现在属于此领域star最多的框架，其被广泛应用于构建前台界面，但或许很少人知道，他也可以写后端应用。本文主角 flutter非常著名的getx库推出的get server jonataslaw/get_server:…...

编程日记 2024/3/2 9:53:22

数据页和缓存页（BufferPool）

1. 数据页（dataPage） 什么是数据页？ 数据页是 MySQL 存储引擎在磁盘和内存之间传输数据的基本单位，默认大小为16KB。数据页的结构： 表头：储存与页相关的元信息，比如，页号&#…...

编程日记 2024/3/2 9:52:21

LibreOJ 136. 最小瓶颈路题解最小生成树倍增

题目链接：LibreOJ 136. 最小瓶颈路题目描述： 给定一张无向图，询问两个结点之间的最小瓶颈路。u和v两个结点之间最小瓶颈路指的是u和v的每条路径中经过的最大边权的最小值。题解： 给出结论：无向图的最小瓶颈路与其最小…...

编程日记 2024/3/2 9:51:21

前端学习第三天-css基础

1. CSS简介从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能…...

编程日记 2024/3/2 9:50:19

各种使用chatgpt prompts技巧

1，利用chatgpt生成照片 1.1，从现在起, 当你想发送一张照片时，请使用 Markdown ,并且不要有反斜线, 不要用代码块。使用 Unsplash API (https://source.unsplash.com/1280x720/? < PUT YOUR QUERY HERE >)。如果你明白了，请回复“明白” 1.2，开始提问生成指定场景照…...

编程日记 2024/3/2 9:46:16

基于单片机的企业指纹考勤系统设计

摘要: 考勤系统是企业人力资源管理的重要依据，传统的考勤系统不能保证准确性，也存在地域局限，不能满足一些跨区域集团公司的考勤要求。文章以单片机技术以及生物特征识别技术为基础，分析企业单片机智能化指纹考勤系统的设计思路，从硬件设备的选型和配置、软件系统的开发、…...

编程日记 2024/3/2 9:45:15

JUC(java.util.concuurrent)的常见类介绍

Java 并发包（java.util.concurrent，简称 JUC）提供了一系列的工具和框架，用于简化并发编程。以下是 JUC 包中常见类的介绍： Callable： Callable 接口是 Java 提供的一个带返回值的任务接口，类似于…...

编程日记 2024/3/2 9:44:14

【中科院计算所】WSDM 2024冠军方案：基于大模型进行多文档问答

作者：李一鸣张兆中科院计算所会话式多文档问答旨在根据检索到的文档以及上下文对话来回答特定问题。在本文中，我们介绍了 WSDM Cup 2024 中“对话式多文档 QA”挑战赛的获胜方法，该方法利用了大型语言模型 (LLM) 卓越的自然语言理解和生…...

编程日记 2024/3/2 9:43:13

使用 MediaStore获取指定文件夹的视频，更优化方法： import android.content.ContentResolver; import android.content.ContentValues; import android.content.Context; import android.net.Uri; import android.os.Build; import android.os.Environme…...

编程日记 2024/3/2 9:42:12

基于django的购物商城系统

摘要本文介绍了基于Django框架开发的购物商城系统。随着电子商务的兴起，购物商城系统成为了许多企业和个人创业者的首选。Django作为一个高效、稳定且易于扩展的Python web框架，为开发者提供了便捷的开发环境和丰富的功能模块，使得开发购物商…...

编程日记 2024/3/2 9:41:11

Swagger3 使用详解

Swagger3 使用详解一、简介1 引入依赖2 开启注解3 增加一个测试接口4 启动服务报错1.5 重新启动6 打开地址：http://localhost:8093/swagger-ui/index.html 二、Swagger的注解1.注解Api和ApiOperation2.注解ApiModel和ApiModelProperty3.注解ApiImplicitParams和Api…...

编程日记 2024/3/2 9:39:09

JVM 第二部分-2（堆，方法区）

4.堆堆一个Java程序（main方法）对应一个jvm实例，一个jvm实例只有一个堆空间堆是jvm启动的时候就被创建，大小也确定了。大小可以用参数设置。堆是jvm管理的一块最大的内存空间核心区域，是垃圾回收的重点区域堆可以位…...

编程日记 2024/3/2 9:38:09

蓝桥杯Java B组历年真题（2013年-2019年）

一、2013年真题 1、世纪末的星期使用日期类判断就行，这里使用LocalDate，也可以使用Calendar类答案 2099 使用LocalDate import java.time.LocalDate; import java.time.format.DateTimeFormatter; // 1:无需package // 2: 类名必须Main, 不可修改p…...

编程日记 2024/3/2 9:37:08

你是谁，便会遇见谁

就会进什么样的圈子。努力提升自己，才是提升阶层最可靠的方法。在人生的舞台上，每一个人都是自己人生的主角。而在这个旅程中，我们会遇见各种各样的人，进入不同的社交圈子。正如一句古训所说：“你是谁，便…...

编程日记 2024/3/2 9:36:07

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/7/6 2:27:06

linux 错误码总结

1，错误码的概念与作用在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/8/11 15:02:00

c#开发AI模型对话

AI模型前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/8/6 7:59:50

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums，返回数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。请不要使用除法，且在 O(n) 时间复杂度…...

编程新知 2025/8/6 19:10:59

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2025/8/22 4:24:32

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。问题在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample（样本数） 表示测试中发送的请求数量，即测试执行了多少次请求。单位，以个或者次数表示。示例：…...

编程新知 2025/7/8 4:01:50

逻辑回归暴力训练预测金融欺诈

简述「使用逻辑回归暴力预测金融欺诈，并不断增加特征维度持续测试」的做法，体现了一种逐步建模与迭代验证的实验思路，在金融欺诈检测中非常有价值，本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2025/8/2 2:30:42

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的第一部分： 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/7/7 5:52:14

LangChain 中的文档加载器（Loader）与文本切分器（Splitter）详解《二》

🧠 LangChain 中 TextSplitter 的使用详解：从基础到进阶（附代码） 一、前言在处理大规模文本数据时，特别是在构建知识库或进行大模型训练与推理时，文本切分（Text Splitting） 是一个…...

编程新知 2025/7/20 10:35:34

水平居中

方案一：文本居中对齐（内联元素）

方案二：自动外边距（块级元素）

方案三：flex布局【推荐】

方案四：子绝父相 + transform （CSS3）

方案五：子绝父相 + 自动外边距 （指定宽度）

方案六：子绝父相 + 负外边距 （知道宽度 + 宽度计算）

垂直居中

方案一：行高 = 容器高度（单行内联元素）

方案二：flex布局【推荐】

方案三：子绝父相 + transform（CSS3）

方案四：子绝父相 + 自动外边距（指定高度）

方案五：子绝父相 + 负外边距 （知道高度 + 高度计算）

水平垂直居中

方案一：flex布局【推荐】

方案二：子绝父相 + transform （CSS3）

方案三：子绝父相 + 自动外边距（指定高度和宽度）

方案四：子绝父相 + 负外边距 （知道宽度和高度 + 宽度和高度计算）

相关文章：

方案五：子绝父相 + 自动外边距（指定宽度）

方案六：子绝父相 + 负外边距（知道宽度 + 宽度计算）

方案五：子绝父相 + 负外边距（知道高度 + 高度计算）

方案四：子绝父相 + 负外边距（知道宽度和高度 + 宽度和高度计算）