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

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

news 2026/4/13 17:49:53

水平居中

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

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

限制条件：仅用于内联元素 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

OmenSuperHub终极指南：高效解锁惠普游戏本硬件控制与性能优化

OmenSuperHub终极指南：高效解锁惠普游戏本硬件控制与性能优化【免费下载链接】OmenSuperHub 使用 WMI BIOS控制性能和风扇速度，自动解除DB功耗限制。项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub OmenSuperHub是一款专为惠普OMEN…...

编程新知 2026/4/13 17:15:47

IDEA开发效率提升：南北阁Nanbeige4.1-3B智能插件开发

IDEA开发效率提升：南北阁Nanbeige4.1-3B智能插件开发告别重复劳动，让AI成为你的编程搭档作为一名常年使用IDEA的开发者，我深知编码过程中那些琐碎却耗时的环节：写模板代码、寻找重构机会、分析依赖关系...直到尝试了南北阁Nanbe…...

编程新知 2026/4/13 17:05:35

AI时代的算法思维：大经典排序学习竞

引言在现代软件开发中，性能始终是衡量应用质量的重要指标之一。无论是企业级应用、云服务还是桌面程序，性能优化都能显著提升用户体验、降低基础设施成本并增强系统的可扩展性。对于使用 C# 开发的应用程序而言，性能优化涉及多个层面&#x…...

编程新知 2026/4/13 16:40:58

FastAPI项目半夜报警吵醒你？聊聊告警这事儿怎么搞！绿

Issue 概述先来看看提交这个 Issue 的作者是为什么想到这个点子的，以及他初步的核心设计概念。?? 本 PR 实现了 Apache Gravitino 与 SeaTunnel 的集成，将其作为非关系型连接器的外部元数据服务。通过 Gravitino 的 REST API 自动获取表结构和元数据&…...

编程新知 2026/4/13 15:45:35

GME多模态向量模型效果展示：Qwen2-VL-2B在技术标准文档图解条款检索中应用

GME多模态向量模型效果展示：Qwen2-VL-2B在技术标准文档图解条款检索中应用 1. 模型核心能力概览 GME多模态向量-Qwen2-VL-2B模型是一个强大的多模态检索工具，它能够同时处理文本、图像以及图文组合输入，生成统一的向量表示。这种能力让它在…...

编程新知 2026/4/13 15:02:25

终极浏览器批量下载指南：使用multi-download高效管理多文件下载

终极浏览器批量下载指南：使用multi-download高效管理多文件下载【免费下载链接】multi-download Download multiple files at once in the browser 项目地址: https://gitcode.com/gh_mirrors/mu/multi-download 在现代Web应用中，批量下载多个文…...

编程新知 2026/4/13 14:15:28

告别安装失败：用Miniconda在Win11上优雅搭建完整Anaconda环境

优雅构建Python数据科学环境：Miniconda与Win11的完美结合在数据科学和机器学习领域，Python环境管理一直是个令人头疼的问题。传统做法是直接安装Anaconda完整版，但这种方式往往带来不必要的臃肿和潜在的安装问题。本文将介绍一种更优雅的解决…...

编程新知 2026/4/13 13:10:26

PyTorch遥感图像变化检测实战技巧：从原理到部署的完整指南

PyTorch遥感图像变化检测实战技巧：从原理到部署的完整指南【免费下载链接】change_detection.pytorch Deep learning models for change detection of remote sensing images 项目地址: https://gitcode.com/gh_mirrors/ch/change_detection.pytorch 遥感图…...

编程新知 2026/4/13 12:52:06

Java解析大疆无人机照片元数据：从EXIF到XMP的实战指南

1. 为什么需要解析大疆无人机照片元数据当你用大疆无人机拍摄照片时，相机不仅记录了画面本身，还悄悄存储了大量"幕后花絮"。这些隐藏在照片里的元数据（Metadata）就像飞行黑匣子，包含了GPS坐标、飞行高度、相…...

编程新知 2026/4/13 12:33:45

3个高级技巧：用ComfyUI Manager彻底改变你的AI绘画工作流

3个高级技巧：用ComfyUI Manager彻底改变你的AI绘画工作流【免费下载链接】ComfyUI-Manager ComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable various cu…...

编程新知 2026/4/13 10:35:09

水平居中

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

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

方案三：flex布局【推荐】

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

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

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

垂直居中

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

方案二：flex布局【推荐】

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

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

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

水平垂直居中

方案一：flex布局【推荐】

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

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

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

相关文章：

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

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

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

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