面试必问 - CSS 中元素居中小技巧

在网页设计中,居中是一个至关重要的布局技巧,能够确保你的页面在不同设备和屏幕尺寸上呈现出优雅的样式。

在这篇文章中,将介绍一些 CSS 居中的基本技巧,适用于各种场景。

1. 水平居中

  • 文本水平居中

通过设置 text-align: center 属性,我们可以使文本在其父容器中水平居中,使得页面内容更易读。

.text-center {text-align: center;
}
  • 块级元素水平居中

对于块状元素,我们设置一个明确的宽度,并使用 margin: 0 auto 来实现水平居中。

.block-center {width: 50%; /* 设置一个具体的宽度 */margin: 0 auto;
}

2. 垂直居中

  • 文本垂直居中

通过设置文本容器的高度和行高,我们可以实现文本在其容器中垂直居中显示。

.vertical-text-center {height: 100px;line-height: 100px; /* 行高等于高度 */
}
  • 块级元素垂直居中

使用 Flex 布局,我们可以轻松实现块级元素在其容器垂直居中。

.vertical-block-center {display: flex;align-items: center;height: 200px;
}

3. 水平和垂直居中

通过 Flex 和 Grid 布局,我们可以实现内容在水平和垂直方向上同时居中显示,适用于各种布局场景。

  • Flex 布局居中

.flex-center {display: flex;justify-content: center;align-items: center;height: 300px;
}
  • Grid 布局居中

.grid-center {display: grid;place-items: center;height: 400px;
}
  • 绝对定位居中

使用绝对定位和 transform 属性,我们可以使元素在其父容器中水平和垂直居中。

.absolute-center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/803420.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Training - Kubeflow 的 PyTorchJob 配置 DDP 分布式训练 (ncclInternalError)

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/137569332 Kubeflow 的 PyTorchJob 是 Kubernetes 自定义资源,用于在 Kubernetes 上运行 PyTorch 训练任务,是 K…

网格矢量如何计算莫兰指数

网格矢量如何计算莫兰指数 引言 遇到一个问题,计算矢量网格的莫兰指数。 概念解释 莫兰指数 莫兰指数(Moran’s Index)是一种空间自相关指标,用于衡量空间数据的相似性和聚集程度。它可以用来描述一个区域与其邻近区域之间的属…

MySQL之函数:字符串函数、日期函数、数值函数、流程函数

字符串函数:用于对文本数据进行操作和处理 CONCAT:用于将多个字符串连接成一个字符串。 SELECT CONCAT(Hello, , World); -- 输出: Hello WorldSUBSTRING:用于截取字符串的子串。包前不包后,从1开始 SELECT SUBSTRING(MySQL, 1, …

这4大流氓软件,以后看见记得绕着走。

第一个,2345浏览器。时不时弹出广告,还会自动修改你的默认主页,并且很难修改回去。 第二个,搜狗输入法。别以为它打字很方便,实际上弹广告也很方便。 第三个,快压。解压不仅给你弹广告,还能让…

TCP-IP详解卷一:协议——阅读总结

该内容适合程序员查看 第1章 概述 1.1 引言 WAN全称是 Wide Area Network,中文名为广域网。 LAN全称是 Local Area Network,中文名为局域网。 1.2分层 ICP/IP协议族通常被认为是一个四层协议系统 分层协议应用层Telnet、FTP和e-mail运输层TCP和UDP网…

在Terraform中定义模块依赖关系

在Terraform中定义模块依赖关系 是指在Terraform配置文件中明确声明模块之间的依赖关系,以确保正确的部署和管理基础设施。 Terraform是一个开源的基础设施即代码工具,它允许开发人员使用简单的声明性语言来定义和管理基础设施资源。模块是Terraform中…

EVAL-21489-EZLITE原理图下载方法

1,进入官网,搜索“21489”: 2,下拉找到EVAL-21489-EZLITE,点击“文件”: 3,点击“电路板设计数据库”的“查看全部”: 4,点击下载即可: 5,下载完成…

系统设计之订单系统中如何防止商品超卖

一、策略 在订单系统中,防止商品超卖是一个至关重要的问题,涉及到多个方面的策略和技术。以下是一些防止商品超卖的主要措施: 库存实时同步与检查: 确保订单系统和库存系统之间的数据实时同步,每次订单生成或取消时&…

Python 全栈体系【四阶】(二十五)

第五章 深度学习 二、计算机视觉基本理论 11. 图像梯度处理 11.1 什么是图像梯度 图像梯度计算的是图像变化的速度。对于图像的边缘部分,其灰度值变化较大,梯度值也较大;相反,对于图像中比较平滑的部分,其灰度值变化…

【鸿蒙开发】ArkTS和组件

1. 初识ArkTS语言 ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript生态基础上做了进一步扩展,继承了TS的所有特性。 当前,ArkTS在TS的基础上主要扩展了如下能力: 基本语法:ArkTS定义了声明式UI描述、自…

一招搞定vcruntime140_1.dll无法继续执行代码的解决方法

在我们日常频繁地与计算机互动、依赖其高效处理各类任务的过程中,偶尔会遭遇一些突发的技术问题,导致原本顺畅的操作流程被迫中断。其中一种常见的困扰便是系统弹出一则明确且令人颇感困惑的错误提示:“由于找不到vcruntime140_1.dll文件&…

C语言的显式类型转换和隐式类型转换详细讲解

目录 一、类型转换 1、显式类型转换 2、隐式类型转换 二、算术转换 三、总结 每个编译器都会对表达式做两件事情,一是判断表达式中操作符的优先级和结合性,二是判断表达式中的操作数类型是否一致,如果不一致则需要进行类型转换。第一点在…

机器学习(五) -- 监督学习(2) -- k近邻

系列文章目录及链接 目录 前言 一、K近邻通俗理解及定义 二、原理理解及公式 1、距离度量 四、接口实现 1、鸢尾花数据集介绍 2、API 3、流程 3.1、获取数据 3.2、数据预处理 3.3、特征工程 3.4、knn模型训练 3.5、模型评估 3.6、结果预测 4、超参数搜索-网格搜…

从零开始学RSA:已知n,e,d求p,q和私钥文件修复

(8)已知n,e,d求p,q 一看这个标题你就应该有个觉悟,n一定无法直接分解得到p和q。 题目: 10-存货5 题目给出了两个文件,一个是加密脚本chall.py,一个是加密后输出的内容output.txt。 分析一下加密脚本: from gmpy2 import invertf…

相机模型浅析

相机模型 文章目录 相机模型四个坐标系针孔相机模型世界坐标系到相机坐标系相机坐标系到图像坐标系图像坐标到像素坐标 四个坐标系 ①世界坐标系:是客观三维世界的绝对坐标系,也称客观坐标系。因为数码相机安放在三维空间中,我们需要世界坐标…

Python3 replace()函数使用详解:字符串的艺术转换

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

JavaScript(1)神秘的编程技巧

大家都感兴趣的箭头函数 箭头函数在许多场景中都可以发挥作用,尤其适用于简化函数声明和提高代码的可读性。以下是箭头函数可以使用的一些常见方面: (1)回调函数: 箭头函数特别适合作为回调函数,例如在事…

RuntimeError: Library cublas64_12.dll is not found or cannot be loaded

运行guillaumekln/faster-whisper-large-v2模型进行语音识别的时候报错了 RuntimeError: Library cublas64_12.dll is not found or cannot be loaded 代码: from faster_whisper import WhisperModelmodel WhisperModel("H:\\model\\guillaumekln\\faster…

Linux系统安装内网穿透实现固定公网地址访问本地MinIO服务

文章目录 前言1. 创建Buckets和Access Keys2. Linux 安装Cpolar3. 创建连接MinIO服务公网地址4. 远程调用MinIO服务小结5. 固定连接TCP公网地址6. 固定地址连接测试 正文开始前给大家推荐个网站,前些天发现了一个巨牛的 人工智能学习网站, 通俗易懂&am…

你不知道的JavaScript---深入理解 JavaScript 作用域

你好,我是小白Coding日志,一个热爱技术的程序员。在这里,我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客,一起在技术的世界里探索前行吧! 1. 什么是作用域…