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

【CSS】样式水平垂直居中

news 2025/11/15 21:16:07

行内元素：

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center

<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

div是文本元素的父元素
因此我们对div元素设置 text-align:center

<style>
.txtCenter{
text-align:center;
}
</style>

定宽块状元素

通过设置“左右margin”值为“auto”来实现居中的。

不定宽高实现盒子水平垂直居中 --面试常考题

通过定位+translate

.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;
}.box1 {border: 1px solid red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

left: 50%：

  • 这个属性是相对定位父元素的左边距离的百分比。在绝对定位的元素中，left: 50% 表示元素的左边缘位于父元素宽度的50%处。这会使元素的左边缘与父元素的中心对齐。

transform: translateX(-50%)：

  • transform 属性是 CSS3 中的属性，可以对元素进行旋转、缩放、倾斜或平移等变换。
  • translateX(-50%) 表示沿着 X 轴平移元素的位置。在这种情况下，50% 的意思是将元素向左平移自身宽度的50%，因此实际上是将元素的中心点与父元素的中心点对齐，从而实现水平居中的效果。

综合起来，left: 50% 将元素的左边缘置于父元素的中心，而 transform: translateX(-50%) 将元素以自身宽度的一半向左平移，使元素的中心与父元素的中心对齐，从而实现水平居中的效果。同理，垂直居中。

相关文章：

【CSS】样式水平垂直居中

行内元素&#xff1a; 如果被设置元素为文本、图片等行内元素时&#xff0c;水平居中是通过给父元素设置 text-align:center <body> <div class"txtCenter">我想要在父容器中水平居中显示。</div> </body>div是文本元素的父元素 因此我们对…...

编程日记 2024/9/15 22:07:12

深入理解数据分析的使用流程：从数据准备到洞察挖掘

数据分析是企业和技术团队实现价值的核心。 5 秒内你能否让数据帮你做出决策&#xff1f; 通过本文&#xff0c;我们将深入探讨如何将原始数据转化为有意义的洞察&#xff0c;帮助你快速掌握数据分析的关键流程。 目录 数据分析的五个核心步骤1. 数据获取常用数据获取方式 2. 数…...

编程日记 2024/9/15 22:06:11

CSS 响应式设计（补充）——WEB开发系列36

随着移动设备的普及&#xff0c;网页设计的焦点逐渐转向了响应式设计。响应式设计不仅要求网页在各种屏幕尺寸上良好展示&#xff0c;还要适应不同设备的特性。 一、响应式设计之前的灵活布局 在响应式设计流行之前&#xff0c;网页布局通常是固定的或流动的。固定布局使用固定…...

编程日记 2024/9/15 22:05:10

Qt常用控件——QDateTimeEdit

文章目录 QDateTimeEdit核心属性及信号时间计算器 QDateTimeEdit核心属性及信号 QDateEdit作为日期的微调框QTimeEdit作为时间的微调框QDateTimeEdit作为时间日期的微调框 它们的使用方式都是类似的&#xff0c;本篇以QDateTimeEdit作为示例 核心属性&#xff1a; 属性说明…...

编程日记 2024/9/15 22:03:55

什么是上拉，下拉？

上拉就是将引脚通过一个电阻连接到电源&#xff0c;作用&#xff1a;1.使IO口的不确定电平稳定在高点平&#xff0c;2、为了增加IO口拉电流的能力。 下拉就是将引脚通过一个电阻与GND相连&#xff0c;作用&#xff1a;1.从器件输出电流 2.当IO口为输入状态时&#xff0c;引脚的…...

编程日记 2024/9/15 22:02:30

76-mysql的聚集索引和非聚集索引区别

MySQL中的聚集索引和非聚集索引的主要区别在于它们的存储方式和使用方式。 聚集索引&#xff08;Clustered Index&#xff09;&#xff1a; 聚集索引的叶子页包含了行的全部数据。 每个表只能有一个聚集索引&#xff0c;因为一个表中的数据只能按照一种方式存储。 当你查询的…...

编程日记 2024/9/15 22:00:28

每日一题——第八十八题

题目&#xff1a;输入一个9位的无符号整数&#xff0c;判断其是否有重复数字 #include<stdio.h> #include<stdbool.h> #include<string.h> int main() {char num_str[10];printf("请输入一个9位数的无符号数&#xff1a;");scanf_s("%9d&quo…...

编程日记 2024/9/15 21:59:21

【创作活动】学习使用哪个编程工具让你的工作效率翻倍？

学习使用哪个编程工具让你的工作效率翻倍&#xff1f; 在日益繁忙的工作环境中&#xff0c;选择合适的编程工具已成为提升开发者工作效率的关键。不同的工具能够帮助我们简化代码编写、自动化任务、提升调试速度&#xff0c;甚至让团队协作更加顺畅。那么&#xff0c;哪款编程…...

编程日记 2024/9/15 21:58:20

基于STM32C8T6的CubeMX：HAL库点亮LED

三个可能的问题和解决方法&#xff1a; 大家完成之后回来看&#xff0c;每一种改错误都是一种成长&#xff0c;不要畏惧&#xff0c;要快乐&#xff0c;积极面对&#xff0c;要耐心对待 STMCuBeMX新建项目的两种匪夷所思的问题https://mp.csdn.net/mp_blog/creation/editor/1…...

编程日记 2024/9/15 21:57:10

职业院校数据科学与大数据技术专业人工智能实训室建设方案

一、引言 随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;其在全球范围内的应用日益广泛&#xff0c;从智能交通、环境保护到公共安全、智能家居等多个领域均展现出巨大的潜力。然而&#xff0c;我国在人工智能领域的人才储备仍显不足&#xff0c;这已成为…...

编程日记 2024/9/15 21:56:03

JavaScript网页设计案例分析

JavaScript网页设计案例分析 随着互联网技术的发展&#xff0c;JavaScript 已经成为现代网页设计中不可或缺的一部分。从简单的页面交互到复杂的应用程序开发&#xff0c;JavaScript 都发挥着至关重要的作用。本文将探讨几个运用 JavaScript 进行网页设计的经典案例&#xff0…...

编程日记 2024/9/15 21:55:02

2024.9.15周报

一、题目信息 题目&#xff1a;Physics-informed neural networks for solving flow problems modeled by the 2D Shallow Water Equations without labeled data 链接&#xff1a;物理信息神经网络用于解决由二维浅水方程建模的流动问题&#xff0c;无需标记数据- ScienceDi…...

编程日记 2024/9/15 21:54:00

QT模型视图结构1

文章目录 Qt 模型视图结构概述(一)1、模型/视图结构基本原理2、模型3、视图4、代理5、简单实例 Qt 模型视图结构概述(一) ​ 模型/视图结构是一种将数据存储和界面展示分离的编程方法。模型存储数据&#xff0c;视图组件显示模型中的数据&#xff0c;在视图组件里修改的数据会…...

编程日记 2024/9/15 21:52:59

Ubuntu20+Noetic+cartographer_ros编译部署

1 准备工作 &#xff08;1&#xff09;准备Ubuntu20系统。 &#xff08;2&#xff09;安装ROS系统,参考 https://blog.csdn.net/weixin_46123033/article/details/139527141&#xff08;3&#xff09;Cartographer相关软件包和源码下载&#xff1a; https://gitee.com/mrwan…...

编程日记 2024/9/15 21:51:58

linux-L3-linux 复制文件

linux 中要将文件file1.txt复制到目录dir中&#xff0c;可以使用以下命令 cp file1.txt dir/复制文件 cp /path/to/source/file /path/to/destination移动 mv /path/to/source/file /path/to/destination复制文件夹内的文件 cp -a /path/to/source/file /path/to/destinati…...

编程日记 2024/9/15 21:49:54

Kotlin：1.9.0 的新特性

一、概述 Kotlin 1.9.0版本英语官方文档 Kotlin 1.9.0 中文官方文档 The Kotlin 1.9.0 release is out and the K2 compiler for the JVM is now in Beta. Additionally, here are some of the main highlights: Kotlin 1.9.0版本已经发布&#xff0c;用于JVM的K2编译器现在…...

编程日记 2024/9/15 21:48:51

golang实现从服务器下载文件到本地指定目录

一、连接服务器&#xff0c;采用sftp连接模式 package middlewaresimport ("fmt""time""github.com/pkg/sftp""golang.org/x/crypto/ssh" )// 建立服务器连接 func Connect(user, password, host string, port int) (*sftp.Client, e…...

编程日记 2024/9/15 21:41:18

C++数据结构-树的概念及分类介绍（基础篇）

1.什么是树 树是数据结构中的一种&#xff0c;其属于非线性数据结构结构的一种&#xff0c;我们前文所提到的数据结构多数都是线性的&#xff0c;这也是较为简单的数据结构&#xff0c;而接下来的树与图均属于非线性数据结构&#xff0c;也是概念极多的一类。 树是由结点或顶…...

编程日记 2024/9/15 21:32:07

职场 Death Note

场景一 测试&#xff1a;哎&#xff0c;怎么会这样呢&#xff1f;时间没到&#xff0c;他怎么就变成这个样子了呢&#xff1f;一副大惊小怪&#xff0c;整个办公室都是他的声音 开发&#xff1a;对对对&#xff0c;我代码问题&#xff0c;别BB了。 你直接说这个地方不对&#…...

编程日记 2024/9/15 21:31:06

Vue3.0组合式API：computed计算属性、watch监听器、watchEffect高级监听器

1、computed() 计算属性 在模板中绑定表达式只能用于简单的运算。如果运算比较复杂&#xff0c;可以使用 Vue.js 提供的计算属性&#xff0c;通过计算属性可以处理比较复杂的逻辑。 1.1 计算属性的应用 通过计算属性可以实现各种复杂的逻辑&#xff0c;包括运算、函数调用等…...

编程日记 2024/9/15 21:28:34

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/11/14 18:37:11

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/11/7 10:17:31

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/11/13 1:16:34

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/10/28 1:35:57

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/11/15 12:55:08

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/10/24 19:46:10

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/11/8 10:30:24

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/11/12 6:42:11

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/11/12 8:17:44

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34