一篇文章理解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>...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
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 …...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。 功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...
深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中，我们训练出的神经网络往往非常庞大（比如像 ResNet、YOLOv8、Vision Transformer），虽然精度很高，但“太重”了，运行起来很慢，占用内存大，不适合部署到手机、摄…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下： avformat_open_input 精简后的代码如下： int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...