CSS【详解】居中对齐 （水平居中 vs 垂直居中）
水平居中
内部块级元素的宽度要小于容器(父元素)
方案一：文本居中对齐（内联元素）
限制条件：仅用于内联元素 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…...
【排序算法】基数排序
一：基本概念 1.1 基数排序(桶排序)介绍 基数排序（radix sort）属于“分配式排序”（distribution sort），又称“桶子法”（bucket sort）或bin sort，顾名思义，它是…...
解释存储过程和函数的区别，以及它们在MySQL中的用途。如何创建和使用存储过程和函数?
解释存储过程和函数的区别，以及它们在MySQL中的用途。 存储过程和函数在MySQL中的区别及用途 区别： 返回值： 函数：必须有一个返回值，这可以是一个标量值或一个表。如果没有明确的RETURN语句，函数将返回N…...
【GPU驱动开发】-GPU架构简介
前言 不必害怕未知，无需恐惧犯错，做一个Creator！ GPU（Graphics Processing Unit，图形处理单元）是一种专门用于处理图形和并行计算的处理器。GPU系统架构通常包括硬件和软件层面的组件。 一、总体流程 应…...
)
m位数问题(c++题解)
题目描述 考官只给两个整数n和m（1 < n < 8，1< m <5），要求选手从1,2,…,n中取出m个数字，组成一个m位整数，统计所有的m位整数中一共有多少个素数。 如n3,m2时，符合条件的整数有&…...
洛谷P1331海战
题目背景 在峰会期间，武装部队得处于高度戒备。警察将监视每一条大街，军队将保卫建筑物，领空将布满了 F-2003 飞机。 此外，巡洋船只和舰队将被派去保护海岸线。不幸的是，因为种种原因，国防海军部仅有很少…...
如何利用Flutter来写后端 服务端应用
前言 Flutter是谷歌推出的一款跨平台开发框架，现在属于此领域star最多的框架，其被广泛应用于构建前台界面，但或许很少人知道，他也可以写后端应用。 本文主角 flutter非常著名的getx库推出的get server jonataslaw/get_server:…...
数据页和缓存页（BufferPool）
1. 数据页（dataPage） 什么是数据页？ 数据页是 MySQL 存储引擎在磁盘和内存之间传输数据的基本单位，默认大小为16KB。 数据页的结构： 表头：储存与页相关的元信息，比如，页号&#…...
LibreOJ 136. 最小瓶颈路 题解 最小生成树 倍增
题目链接：LibreOJ 136. 最小瓶颈路 题目描述： 给定一张无向图，询问两个结点之间的最小瓶颈路。u和v两个结点之间最小瓶颈路指的是u和v的每条路径中经过的最大边权的最小值。 题解： 给出结论：无向图的最小瓶颈路与其最小…...
前端学习第三天-css基础
1. CSS简介 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能…...
各种使用chatgpt prompts技巧
1，利用chatgpt生成照片 1.1，从现在起, 当你想发送一张照片时，请使用 Markdown ,并且 不要有反斜线, 不要用代码块。使用 Unsplash API (https://source.unsplash.com/1280x720/? < PUT YOUR QUERY HERE >)。如果你明白了，请回复“明白” 1.2，开始提问生成指定场景照…...
基于单片机的企业指纹考勤系统设计
摘要: 考勤系统是企业人力资源管理的重要依据，传统的考勤系统不能保证准确性，也存在地域局限，不能满足一些跨区域集团公司的考勤要求。文章以单片机技术以及生物特征识别技术为基础，分析企业单片机智能化指纹考勤系统的设计思路，从硬件设备的选型和配置、软件系统的开发、…...
的常见类介绍)
JUC(java.util.concuurrent)的常见类介绍
Java 并发包（java.util.concurrent，简称 JUC）提供了一系列的工具和框架，用于简化并发编程。以下是 JUC 包中常见类的介绍： Callable： Callable 接口是 Java 提供的一个带返回值的任务接口，类似于…...
【中科院计算所】WSDM 2024冠军方案：基于大模型进行多文档问答
作者：李一鸣 张兆 中科院计算所 会话式多文档问答旨在根据检索到的文档以及上下文对话来回答特定问题。 在本文中，我们介绍了 WSDM Cup 2024 中“对话式多文档 QA”挑战赛的获胜方法，该方法利用了大型语言模型 (LLM) 卓越的自然语言理解和生…...
Android提供了多种方式来打开特定文件夹中的视频
使用 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…...
基于django的购物商城系统
摘要 本文介绍了基于Django框架开发的购物商城系统。随着电子商务的兴起，购物商城系统成为了许多企业和个人创业者的首选。Django作为一个高效、稳定且易于扩展的Python web框架，为开发者提供了便捷的开发环境和丰富的功能模块，使得开发购物商…...
Swagger3 使用详解
Swagger3 使用详解 一、简介1 引入依赖2 开启注解3 增加一个测试接口4 启动服务报错1.5 重新启动6 打开地址：http://localhost:8093/swagger-ui/index.html 二、Swagger的注解1.注解Api和ApiOperation2.注解ApiModel和ApiModelProperty3.注解ApiImplicitParams和Api…...
JVM 第二部分-2（堆，方法区）
4.堆 堆 一个Java程序（main方法）对应一个jvm实例，一个jvm实例只有一个堆空间堆是jvm启动的时候就被创建，大小也确定了。大小可以用参数设置。堆是jvm管理的一块最大的内存空间 核心区域，是垃圾回收的重点区域堆可以位…...
蓝桥杯Java B组历年真题（2013年-2019年）
一、2013年真题 1、世纪末的星期 使用日期类判断就行，这里使用LocalDate，也可以使用Calendar类 答案 2099 使用LocalDate import java.time.LocalDate; import java.time.format.DateTimeFormatter; // 1:无需package // 2: 类名必须Main, 不可修改p…...
你是谁，便会遇见谁
就会进什么样的圈子。努力提升自己，才是提升阶层最可靠的方法。 在人生的舞台上，每一个人都是自己人生的主角。而在这个旅程中，我们会遇见各种各样的人，进入不同的社交圈子。正如一句古训所说：“你是谁，便…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求，并检查收到的响应。它以以下模式之一…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...