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

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

news 2026/1/20 16:49:32

水平居中

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

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

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

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/1/20 10:45:30

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一） 1. CSI-2层定义（CSI-2 Layer Definitions） 分层结构 ：CSI-2协议分为6层： 物理层（PHY Layer） ： 定义电气特性、时钟机制和传输介质（导线&#…...

编程新知 2026/1/20 16:14:31

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色点击visual studio 上方的工具-> 选项在选项窗口中，选择环境 -> 常规 ，将其中的颜色主题改成深色点击确定，更改完成...

编程新知 2026/1/15 5:22:56

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/15 6:21:10