一篇文章理解CSS垂直布局方法
方法1：align-content: center
在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 align-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></head><style>.box {height: 100px; width: 100%;border: 1px solid red;text-align: center;}</style><body><div class="box" style="align-content: center;"><code>align-content</code> 垂直居中!</div></body>
</html>实现效果：
方法2：表格单元格
有 4 种主要布局：流（默认）、表格、flexbox、grid。如何对齐取决于容器的布局。Flexbox 和 grid 相对较晚添加，所以表格是第一种方式。
<div class="box" style="display: table;"><div style="display: table-cell; vertical-align: middle;">内容。</div>
</div>方法3：绝对定位
通过绝对定位间接的方式来实现这个效果。
<div class="box" style="position: relative;"><div style="position: absolute; top: 50%; transform: translateY(-50%);">内容。</div>
</div>这个方式通过绝对定位来绕过流式布局：
-
用
position: relative标记参考容器。 -
用
position: absolute; top: 50%将内容的边缘放置在中心。 -
用
transform: translateY(-50%)将内容中心偏移到边缘。
方法4：内联内容
虽然流布局对内容对齐没有帮助。它允许在一行内进行垂直对齐。那么可以让行的高度和容器一样高。
<div class="container">::before<div class="content">内容。</div>
</div>
.container::before {content: '';height: 100%;display: inline-block;vertical-align: middle;
}
.content {display: inline-block;vertical-align: middle;
}这个方式有一个缺陷，需要额外创建一个伪元素。
方法5：单行 flexbox
现在布局中的 Flexbox 变得广泛可用。它有两种模式：单行和多行。在单行模式（默认）中，行填充垂直空间，align-items 对齐行内的内容
<div style="display: flex; align-items: center;"><div>内容。</div>
</div>
或者调整行为列，并用 justify-content 对齐内容。
<div style="display: flex; flex-flow: column; justify-content: center;"><div>内容。</div>
</div>方法6：多行 flexbox
在多行 flexbox 中，行不再填充垂直空间，所以行（只有一个项目）可以用 align-content 对齐。
<div style="display: flex; flex-flow: row wrap; align-content: center;"><div>内容。</div>
</div>方法7：grid
Grid 出来的更晚，对齐变得更简单。
<div style="display: grid; align-content: center;"><div>内容。</div>
</div>方法8：grid 单元格
注意与前一个方法的微妙区别：
-
align-content将单元格居中到容器。 -
align-items将内容居中到单元格，同时单元格拉伸以适应容器。
<div style="display: grid; align-items: center;"><div>内容。</div>
</div>方法9：margin:auto
在流布局中，margin:auto 可以水平居中，但不是垂直居中。使用 margin-block: auto 可以设置垂直居中。
<div style="display: grid;"><div style="margin-block: auto;">内容。</div>
</div>相关文章：
一篇文章理解CSS垂直布局方法
方法1：align-content: center 在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 align-content: center进行垂直居中。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewpo…...
SpringBoot day 1105
ok了家人们，今天继续学习spring boot，let‘s go 六.SpringBoot实现SSM整合 6.1 创建工程，导入静态资源 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</…...
MySQL 完整教程：从入门到精通
MySQL 完整教程：从入门到精通 MySQL 是一个广泛使用的关系型数据库管理系统，它使用结构化查询语言 (SQL) 来管理和操作数据。本文将详细介绍 MySQL 的基本概念、安装与配置、常用 SQL 语法、数据表的创建与管理、索引、视图、存储过程、触发器等高级特性…...
【贝叶斯公式】贝叶斯公式、贝叶斯定理、贝叶斯因子，似然比
一、是什么？ 贝叶斯公式的本质在于它提供了一种在已有知识的基础上更新和调整我们对事件的信念的方式。具体来说，贝叶斯公式描述了后验概率（即在观察到某些证据后更新的概率）与先验概率（即在没有观察证据之前的概率&a…...
[libos源码学习 1] Liboc协程生产者消费者举例
文章目录 1. CoRoutineEnv_t结构体用于管理协程环境 3 Liboc协程生产者消费者例子4 Liboc协程生产者消费者， 为什么队列不需要上锁？5. 两个协程访问资源不需要加队列吗5. 参考 1. CoRoutineEnv_t结构体用于管理协程环境 struct stCoRoutineEnv_t { stCo…...
Python OpenCV 图像改变
更改图像数据 通过 改像素点 或者 切片的区域 import cv2 import numpy as np img cv2.imread("image.jpg") print(img[3,5]) # 显示某位置(行3列5)的像素值( 如 [53 34 29] 它是有三通道 B G R 组成) img[3,5] (0,0,255) # 更改该位置的像素…...
k8s按需创建 PV和创建与使用 PVC
在 Kubernetes 中，PersistentVolume（PV）和 PersistentVolumeClaim（PVC）用于管理存储资源。PV 是集群中的存储资源，而 PVC 是 Pod 请求 PV 的方式。按需创建 PV 通常使用 StorageClass 实现动态存储分配&…...
揭秘云计算 | 2、业务需求推动IT发展
揭秘云计算 | 1、云从哪里来？-CSDN博客https://blog.csdn.net/Ultipa/article/details/143430941?spm1001.2014.3001.5502 书接上文： 过去几十年间IT行业从大型主机过渡到客户端/服务器，再过渡到现如今的万物互联，IT可把控的资…...
【系统面试篇】进程与线程类（2）（笔记）——进程调度、中断、异常、用户态、核心态
目录 一、相关面试题 1. 进程的调度算法有哪些？ 调度原则 （1）先来先服务调度算法 （2）最短作业优先调度算法 （3）高响应比优先调度算法 （4）时间片轮转调度算法 &am…...
基于MySQL的企业专利数据高效查询与统计实现
背景 在进行产业链/产业评估工作时，我们需要对企业的专利进行评估，其中一个重要指标是统计企业每一年的专利数量。本文基于MySQL数据库，通过公司名称查询该公司每年的专利数，实现了高效的专利数据统计。 流程 项目流程概述如下&…...
热成像手机VS传统热成像仪：AORO A23为何更胜一筹？
热成像技术作为一种非接触式测温方法，广泛应用于石油化工巡检、电力巡检、应急救援、医疗、安防等“危、急、特”场景。提及热成像设备，人们往往会首先想到价格高昂、操作复杂且便携性有限的热成像仪。但是，随着技术的不断进步，市…...
Spring IoC——依赖注入
1. 依赖注入的介绍 DI，也就是依赖注入，在容器中建立的 bean （对象）与 bean 之间是有依赖关系的，如果直接把对象存在 IoC 容器中，那么就都是一个独立的对象，通过建立他们的依赖关系，…...
Linux 中，flock 对文件加锁
在Linux中，flock是一个用于对文件加锁的实用程序，它可以帮助协调多个进程对同一个文件的访问，避免出现数据不一致或冲突等问题。以下是对flock的详细介绍： 基本原理 flock通过在文件上设置锁来控制多个进程对该文件的并发访问。…...
CentOS下载ISO镜像的方法
步骤 1：访问CentOS官方网站 首先，打开浏览器，输入CentOS的官方网站地址：Download 在网站上找到ISO镜像的下载链接，通常位于“Downloads”或类似的页面上。 选择所需的CentOS版本和架构（如x86_64…...
Node.js 入门指南：从零开始构建全栈应用
🌈个人主页：前端青山 🔥系列专栏：node.js篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来node.js篇专栏内容:node.js-入门指南：从零开始构建全栈应用 前言 大家好，我是青山。作…...
MYSQL 真实高并发下的死锁
https://pan.baidu.com/s/1nM3VQdbkNZhnK-wWboEYxA?pwdvwu6 下面是风控更新语句 ------------------------ LATEST DETECTED DEADLOCK ------------------------ 2023-08-04 01:00:10 140188779017984 *** (1) TRANSACTION: TRANSACTION 895271870, ACTIVE 0 sec starting …...
Zookeeper 简介 | 特点 | 数据存储
1、简介 zk就是一个分布式文件系统，不过存储数据的量极小。 1. zookeeper是一个为分布式应用程序提供的一个分布式开源协调服务框架。是Google的Chubby的一个开源实现，是Hadoop和Hbase的重要组件。主要用于解决分布式集群中应用系统的一致性问题。 2. 提…...
设计模式之结构型模式---装饰器模式
目录 1.概述2.类图3.应用场景及优缺点3.1 应用场景3.2 优缺点3.2.1 优点3.2.2 缺点 4.实现4.1 案例类图4.2 代码实现4.2.1 定义抽象构建角色4.2.2 定义具体构建角色4.2.3 定义抽象装饰器角色4.2.4 定义具体装饰角色4.2.5 装饰器模式的使用 1.概述 装饰器模式是指在不改变现有对…...
Android Pair
Pair在Android中是一种轻量级的工具类，并不是严格意义上的数据结构。 数据结构是一组有组织的方式来存储和管理数据的方式，如数组、链表、栈、队列、树、图等，它们有自己的特性和操作规则。而Pair更像是一个简单的封装，用于在需要…...
华为荣耀曲面屏手机下面空白部分设置颜色的方法
荣耀部分机型下面有一块空白区域，如下图红框部分 设置这部分的颜色需要在themes.xml里面设置navigationBarColor属性 <item name"android:navigationBarColor">android:color/white</item>...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...
Xshell远程连接Kali（默认 | 私钥）Note版
前言:xshell远程连接，私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
淘宝扭蛋机小程序系统开发：打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发，旨在打造一个互动性强的购物平台，让用户在购物的同时，能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机，实现旋转、抽拉等动作，增…...
Android写一个捕获全局异常的工具类
项目开发和实际运行过程中难免会遇到异常发生，系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler，它是Thread的子类（就是package java.lang;里线程的Thread）。本文将利用它将设备信息、报错信息以及错误的发生时间都…...
文件上传漏洞防御全攻略
要全面防范文件上传漏洞，需构建多层防御体系，结合技术验证、存储隔离与权限控制： 🔒 一、基础防护层 前端校验（仅辅助） 通过JavaScript限制文件后缀名（白名单）和大小，提…...
性能优化中，多面体模型基本原理
1）多面体编译技术是一种基于多面体模型的程序分析和优化技术，它将程序 中的语句实例、访问关系、依赖关系和调度等信息映射到多维空间中的几何对 象，通过对这些几何对象进行几何操作和线性代数计算来进行程序的分析和优 化。 其中࿰…...
在ubuntu等linux系统上申请https证书
使用 Certbot 自动申请 安装 Certbot Certbot 是 Let’s Encrypt 官方推荐的自动化工具，支持多种操作系统和服务器环境。 在 Ubuntu/Debian 上： sudo apt update sudo apt install certbot申请证书 纯手动方式（不自动配置）&…...