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

CSS—元素水平居中：2分钟掌握常用的水平居中

news 2026/5/20 5:57:53

个人博客：haichenyi.com。感谢关注

1. 目录

  • 1–目录
  • 2–行内元素水平居中
  • 3–块级元素水平居中

2. 行内元素水平居中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS—元素居中</title><style>div {background-color: bisque;/* 水平居中，增加行内元素生效：文本等等 */text-align: center;}</style>
</head><body><div><p>哈哈哈哈</p></div>
</body></html>

水平居中1

3 块级元素水平居中

margin: 0 auto;

        .margin0auto {width: 100px;height: 100px;background-color: aqua;/* 上下0px,左右自适应 */margin: 0 auto;}<div><div class="margin0auto"></div></div>

水平居中2

display: inline-block;和父容器的text-align: center;

<div style="text-align: center;"><!-- inline-block将块级元素设置为inline-block，然后利用父容器的text-align: center;属性使元素水平居中。这种方法适用于需要在一行中显示多个块级元素的情况。--><div style="display: inline-block; width: 200px;background-color: aquamarine;">块级元素1</div><div style="display: inline-block; width: 200px;background-color: aquamarine;">块级元素2</div><div style="display: inline-block; width: 200px;background-color: aquamarine;">块级元素3</div></div>

水平居中3

弹性布局(很重要)

<!-- 设置父容器的display: flex;和justify-content: center;属性，可以使子元素在父容器中水平居中。-->
<div style="display: flex; justify-content: center;"><div style="width: 200px;">这是一个使用Flexbox布局的块级元素</div>
</div>

水平居中3

Grid布局

<!-- 设置父容器的display: grid;和place-items: center;（或justify-items: center;和align-items: center;分别设置水平和垂直居中）属性 --><div style="display: grid; place-items: center;margin-top: 20px;"><div style="width: 200px;background-color: orange;">这是一个使用Grid布局的块级元素</div></div>

水平居中4

绝对定位和变换

<!-- 对于块级元素，还可以使用绝对定位和CSS变换（transform）来实现水平居中。1.将父容器设置为相对定位（position: relative;）2.子元素设置为绝对定位（position: absolute;）3.left: 50%;将子元素的左边缘移动到父容器的水平中心位置4.最后使用transform: translateX(-50%);将子元素自身的宽度的一半向左移动--><div style="position: relative; width: 100%; height: 200px;margin-top: 20px;"><divstyle="position: absolute; left: 50%; transform: translateX(-50%); width: 200px; background-color: cadetblue;">这是一个使用绝对定位和变换的块级元素</div></div>

水平居中5

没有什么好精炼的，根据不同的场景使用不同的方法即可。反正，我用的最多的就是弹性布局

相关文章：

CSS—元素水平居中：2分钟掌握常用的水平居中

个人博客&#xff1a;haichenyi.com。感谢关注 1. 目录 1–目录2–行内元素水平居中3–块级元素水平居中 2. 行内元素水平居中 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" …...

编程日记 2025/3/5 22:21:26

PyTorch 中结合迁移学习和强化学习的完整实现方案

结合迁移学习&#xff08;Transfer Learning&#xff09;和强化学习&#xff08;Reinforcement Learning, RL&#xff09;是解决复杂任务的有效方法。迁移学习可以利用预训练模型的知识加速训练&#xff0c;而强化学习则通过与环境的交互优化策略。以下是如何在 PyTorch 中结合…...

编程日记 2025/3/5 22:20:24

大语言模型学习--本地部署DeepSeek

本地部署一个DeepSeek大语言模型 研究学习一下。 本地快速部署大模型的一个工具 先根据操作系统版本下载Ollama客户端 1.Ollama安装 ollama是一个开源的大型语言模型&#xff08;LLM&#xff09;本地化部署与管理工具&#xff0c;旨在简化在本地计算机上运行和管理大语言模型…...

编程日记 2025/3/5 22:19:22

Linux：vim快捷键

Linux打开vim默认第一个模式是&#xff1a;命令模式&#xff01; 命令模式快捷键操作&#xff1a; gg&#xff1a;光标快速定位到最开始 shift g G&#xff1a;光标快速定位到最结尾 n shift g n G&#xff1a;光标快速定位到第n行 shift 6 ^&#xff1a;当前行开始 …...

编程日记 2025/3/5 22:13:14

Unity 对象池技术

介绍 是什么&#xff1f; 在开始时初始化若干对象&#xff0c;将它们存到对象池中。需要使用的时候从对象池中取出&#xff0c;使用完后重新放回对象池中。 优点 可以避免频繁创建和销毁对象带来性能消耗。 适用场景 如果需要对某种对象进行频繁创建和销毁时&#xff0c;例…...

编程日记 2025/3/5 22:11:12

算法1-4 凌乱的yyy / 线段覆盖

题目描述 现在各大 oj 上有 n 个比赛&#xff0c;每个比赛的开始、结束的时间点是知道的。 yyy 认为&#xff0c;参加越多的比赛&#xff0c;noip 就能考的越好&#xff08;假的&#xff09;。 所以&#xff0c;他想知道他最多能参加几个比赛。 由于 yyy 是蒟蒻&#xff0c…...

编程日记 2025/3/5 22:09:10

【计网】数据链路层

数据链路层 3.1 数据链路层概述3.2 封装成帧3.3 差错检测3.4 可靠传输3.4.1 可靠传输的概念3.4.2 可靠传输的实现机制 - 停止等待协议3.4.3 可靠传输的实现机制 -回退N帧协议3.4.4 可靠传输的实现机制 -选择重传协议 3.5 点对点协议3.5.1 帧格式3.5.2 透明传输 3.6 媒体接入控制…...

编程日记 2025/3/5 22:04:03

javaweb自用笔记：Vue

Vue 什么是vue vue案例 1、引入vue.js文件 2、定义vue对象 3、定义vue接管的区域el 4、定义数据模型data 5、定义视图div 6、通过标签v-model来绑定数据模型 7、{{message}}直接将数据模型message展示出来 8、由于vue的双向数据绑定&#xff0c;当视图层标签input里的…...

编程日记 2025/3/5 22:00:58

CSS Overflow 属性详解

CSS Overflow 属性详解 在网页设计和开发中，CSS Overflow 属性是一个非常重要的特性，它决定了当内容超出其容器大小时应该如何处理。本文将详细介绍 CSS Overflow 属性的相关知识，包括其语法、作用、常用属性值以及一些实际应用场景。 1. CSS Overflow 属性概述 CSS Over…...

编程日记 2025/3/5 21:59:57

沃丰科技结合DeepSeek大模型技术落地与应用前后效果对比

技术突破&#xff1a;DeepSeek算法创新&#xff0c;显著降低了显存占用和推理成本。仅需少量标注数据即可提升推理能力。这种突破减少了对海量数据的依赖&#xff0c;削弱了数据垄断企业的优势&#xff01; 商业模式颠覆&#xff1a;DeepSeek选择完全开源模式&#xff0c;迫使…...

编程日记 2025/3/5 21:54:50

突破光学成像局限：全视野光学血管造影技术新进展

全视野光学血管造影&#xff08;FFOA&#xff09;作为一种实时、无创的成像技术&#xff0c;能够提取生物血液微循环信息&#xff0c;为深入探究生物组织的功能和病理变化提供关键数据。然而&#xff0c;传统FFOA成像方法受到光学镜头景深&#xff08;DOF&#xff09;的限制&am…...

编程日记 2025/3/5 21:52:48

2.反向传播机制简述——大模型开发深度学习理论基础

在深度学习开发中&#xff0c;反向传播机制是训练神经网络不可或缺的一部分。它让模型能够通过不断调整权重&#xff0c;从而将预测误差最小化。本文将从实际开发角度出发&#xff0c;简要介绍反向传播机制的核心概念、基本流程、在现代网络中的扩展&#xff0c;以及如何利用自…...

编程日记 2025/3/5 21:50:46

机器学习校招面经二

快手 机器学习算法 一、AUC&#xff08;Area Under the ROC Curve&#xff09;怎么计算&#xff1f;AUC接近1可能的原因是什么&#xff1f; 见【搜广推校招面经四】 AUC 是评估分类模型性能的重要指标&#xff0c;用于衡量模型在不同阈值下区分正负样本的能力。它是 ROC 曲线…...

编程日记 2025/3/5 21:39:34

Spring Boot如何利用Twilio Verify 发送验证码短信？

Twilio提供了一个名为 Twilio Verify 的服务&#xff0c;专门用于处理验证码的发送和验证。这是一个更为简化和安全的解决方案&#xff0c;适合需要用户身份验证的应用。 使用Twilio Verify服务的步骤 以下是如何在Spring Boot中集成Twilio Verify服务的步骤&#xff1a; 1.…...

编程日记 2025/3/5 21:37:32

毕业项目推荐：基于yolov8/yolo11的苹果叶片病害检测识别系统（python+卷积神经网络）

文章目录 概要一、整体资源介绍技术要点功能展示&#xff1a;功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出&#xff08;xls格式&#xff09;功能6 支持切换检测到的目标查看 二、数据集三、算法介绍1. YO…...

编程日记 2025/3/5 21:34:27

Linux的用户与权限--第二天

认知root用户&#xff08;超级管理员&#xff09; root用户用于最大的系统操作权限 普通用户的权限&#xff0c;一般在HOME目录内部不受限制 su与exit命令 su命令&#xff1a; su [-] 用户名 -符号是可选的&#xff0c;表示切换用户后加载环境变量 参数为用户名&#xff0c…...

编程日记 2025/3/5 21:32:26

【Flink银行反欺诈系统设计方案】1.短时间内多次大额交易场景的flink与cep的实现

【flink应用系列】1.Flink银行反欺诈系统设计方案 1. 经典案例&#xff1a;短时间内多次大额交易1.1 场景描述1.2 风险判定逻辑 2. 使用Flink实现2.1 实现思路2.2 代码实现2.3 使用Flink流处理 3. 使用Flink CEP实现3.1 实现思路3.2 代码实现 4. 总结 1. 经典案例&#xff1a;短…...

编程日记 2025/3/5 21:27:19

HashMap的table数组何时初始化？默认容量和扩容阈值是多少？

HashMap 的 table 数组何时初始化&#xff1f; 答案&#xff1a; table 数组在第一次调用 put() 方法时初始化。 为什么&#xff1f; HashMap 为了节省内存&#xff0c;采用了“懒加载”机制。即使用 new HashMap() 创建对象时&#xff0c;只是计算了参数&#xff08;如容量、…...

编程日记 2025/3/5 21:25:17

基于CURL命令封装的JAVA通用HTTP工具

文章目录 一、简要概述二、封装过程1. 引入依赖2. 定义脚本执行类 三、单元测试四、其他资源 一、简要概述 在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具&#xff0c;可以说是一款很强大的http命令行工具。它支持文件的上传和下载&#xff0c;是综合传输工具&…...

编程日记 2025/3/5 21:24:15

docker学习笔记（1）从安装docker到使用Portainer部署容器

docker学习笔记第一课 先交代背景 docker宿主机系统&#xff1a;阿里云ubuntu22.04 开发机系统&#xff1a;win11 docker镜像仓库&#xff1a;阿里云&#xff0c;此阿里云与宿主机系统没有关系&#xff0c;是阿里云提供的一个免费的docker仓库 代码托管平台&#xff1a;github&…...

编程日记 2025/3/5 21:22:13

从零构建YOLOv8火焰烟雾检测系统：GUI开发、模型训练与实战部署全解析

1. 项目背景与核心价值 火焰烟雾检测在工业安全、森林防火和智能家居等领域有着广泛的应用需求。传统检测方法主要依赖传感器&#xff0c;但存在响应慢、覆盖范围有限等问题。基于计算机视觉的解决方案能够突破物理限制&#xff0c;实现大范围实时监控。YOLOv8作为当前最先进的…...

编程新知 2026/5/20 5:41:43

雀巢冰淇淋在华投资的首家冰淇淋工厂迎来成立40周年 | 美通社头条

、美通社消息&#xff1a;近日&#xff0c;雀巢冰淇淋华南生产基地 —— 广州冷冻食品有限公司迎来成立40周年。该工厂是雀巢冰淇淋在华投资的首家冰淇淋工厂&#xff0c;陪伴一代代华南消费者成长的经典甜筒、飞鱼脆皮等产品皆出自广冻厂。1986年&#xff0c;在改革开放的时代…...

编程新知 2026/5/20 5:37:22

如何高效使用Display Driver Uninstaller：显卡驱动清理终极指南

如何高效使用Display Driver Uninstaller&#xff1a;显卡驱动清理终极指南 【免费下载链接】display-drivers-uninstaller Display Driver Uninstaller (DDU) a driver removal utility / cleaner utility 项目地址: https://gitcode.com/gh_mirrors/di/display-drivers-uni…...

编程新知 2026/5/20 5:08:00

Linux 登录用户、主机名、提示符详解（新手不迷路）

前言刚打开Linux终端&#xff0c;新手总会被一行奇怪的字符搞懵&#xff1a;ubuntuubuntu:~$ —— 这串字符到底是什么意思&#xff1f;“ubuntu”重复出现&#xff0c;冒号、波浪号、美元符号又代表什么&#xff1f;其实&#xff0c;这串字符就是Linux的“提示符”&#xff0c…...

编程新知 2026/5/20 4:26:04

训练和微调

训练和微调微调本质上就是在调整&#xff08;更新&#xff09;模型的参数。当我们说“调整参数”时&#xff0c;指的是调整神经网络内部数以亿计的权重&#xff08;Weights&#xff09;和偏置&#xff08;Biases&#xff09;。全量微调&#xff08;Full Fine-Tuning&#xff09…...

编程新知 2026/5/20 3:35:10

避坑指南：用3dMax一键房屋插件时，为什么你的窗洞总创建失败？

3dMax一键房屋插件窗洞创建失败的深度排查手册 引言 在建筑可视化与室内设计领域&#xff0c;3dMax的一键房屋插件确实为设计师节省了大量重复劳动时间。然而&#xff0c;许多中级用户在尝试创建窗洞时&#xff0c;常常遭遇各种意料之外的失败——从简单的按钮灰色不可点击&…...

编程新知 2026/5/20 3:22:57

手把手教你给M301H-BYT盒子刷当贝纯净桌面（附Hi3798芯片短接点位图）

从零开始&#xff1a;M301H-BYT盒子刷机实战指南 家里的老旧电视盒子用久了总是卡顿、存储不足&#xff0c;还限制应用安装&#xff1f;今天我们就来彻底解决这个问题。本文将手把手教你如何为M301H-BYT盒子刷入当贝纯净桌面系统&#xff0c;让你的老设备重获新生。不同于简单的…...

编程新知 2026/5/20 2:48:49

如何用Univer在3小时内构建企业级电子表格应用？5个实战技巧分享

如何用Univer在3小时内构建企业级电子表格应用&#xff1f;5个实战技巧分享 【免费下载链接】univer Build AI-native spreadsheets. Univer is a full-stack framework for creating and editing spreadsheets on both web and server. With Univer Platform, Univer Spreadsh…...

编程新知 2026/5/20 2:34:32

智绘低空新图景：黎阳之光以数智技术赋能低空经济高质量发展

在长三角一体化战略纵深推进、新质生产力加速培育的时代浪潮中&#xff0c;低空经济正成为驱动区域经济转型升级的重要引擎。华东师范大学大虹桥低空经济研究院的成立&#xff0c;为行业搭建起“理论实践技术人才”的全链条创新平台&#xff1b;而北京黎阳之光科技有限公司&…...

编程新知 2026/5/20 1:55:25

Perplexity实时新闻查询失效真相：Webhook劫持、缓存穿透与CDN时钟漂移三重陷阱

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Perplexity实时新闻查询失效真相&#xff1a;Webhook劫持、缓存穿透与CDN时钟漂移三重陷阱 Perplexity 的实时新闻查询功能近期频繁返回陈旧或空结果&#xff0c;表面看是 API 延迟&#xff0c;实则深陷 Webh…...

编程新知 2026/5/19 23:08:17