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

元素的水平居中和垂直几种方案

总结一下各种元素的水平居中和垂直居中方案。

水平居中:

1.行内元素水平居中 text-align: center

定义行内内容(例如文字)如何相对它的块父元素对齐;不仅可以让文字水平居中,还可以让行内元素水平居中

注意:给行内元素的父元素设置

  • left:左对齐
  • right:右对齐
  • center:正中间显示
  •  justify:两端对齐

2.块级元素的水平居中  margin: 0 auto;

 设置当前块级元素(宽度): margin: 0 auto;

原理:一个块级元素默认独占一行,默认宽度是容器的宽度,margin-left,margin-right默认为0,若设置父元素的宽度为100px,本身的宽度是50px,则会自动设置该元素的margin-right为50px,即该元素的整体宽度仍然等于父元素的宽度。

当设置margin-left:auto,margin-right:auto,为了使该元素的宽度等于父容器的宽度,浏览器会使左右两侧的margin会平分剩余的宽度,所以会使该块级元素水平居中。

 3.绝对定位

    元素有宽度情况下, left0/right0/margin: 0 auto;

4.flex    justify-content: center

display:flex;
justify-content:center;

垂直居中:

  • 1.绝对定位

        * 元素有高度情况下, top0/bottom0/margin: auto 0;

<style>.container {position: relative;height: 300px;}.box1 {position: absolute;width: 100px;height: 100px;top: 0;bottom: 0;margin: auto 0;}
</style>
<div class="container"><div class="box1">我居中了</div>
</div>

 父元素height:300px,子元素height:100px,margin-top和margin-button会均分垂直方向剩余的距离。

 弊端:

     1>绝对定位会使元素脱离标准流,可能影响其他元素的布局

     2>必须给元素设置高度

  • 2. flex布局(直接使用flex)

<style>.container {display: flex;align-item:center;height: 300px;}.box1 {width: 100px;}
</style>
<div class="container"><div class="box1">我居中了</div>
</div>

    弊端:

      1> flex-container中的flex-item都会垂直居中

      2> 相对来说, 兼容性差一点点(基本可以忽略)

  • 3.相对定位+translate

  • 父元素设置高度,子元素可以不设置高度

  • 先向下移动父元素高度的一半

  • 在向上移动自身高度的一半

top:50%;transform: translate(0,-50%);

<style>.box1 {position: relative;top:50%;transform: translate(0,-50%);}
</style>
<div class="container"><div class="box1">我居中了</div>
</div>

思考:向下移动父元素高度的一半的时候为什么不适用margin-top:50% ?

margin的百分比是相对于包含块(父元素)的宽度。

4.文本垂直居中

line-height:两行文本base-line之间的距离,该距离正好等于一行的高度

当行高大于字体高度时,剩余的行距会上下均分,所以文字始终位于行高的中间,当设置行高等于容器的高度时,文字正好可以在容器中垂直居中。

注意:该方法只能用于文本,因为文本具有在行高中居中显示的特性

相关文章:

元素的水平居中和垂直几种方案

总结一下各种元素的水平居中和垂直居中方案。 水平居中&#xff1a; 1.行内元素水平居中 text-align: center 定义行内内容&#xff08;例如文字&#xff09;如何相对它的块父元素对齐;不仅可以让文字水平居中&#xff0c;还可以让行内元素水平居中 注意&#xff1a;给行内…...

JS和JQuery的区别

JS和jQuery都是用于前端开发的工具&#xff0c;但是它们有一些重要的区别。主要区别如下&#xff1a; JS是一种编程语言&#xff0c;而jQuery是一个JS库。JS可以与其他语言一起使用&#xff08;如PHP、Python等&#xff09;&#xff0c;而jQuery是JS的一个扩展&#xff0c;只能…...

延时摄影视频制作工具 LRTimelapse mac中文版特点介绍

lrTimelapse mac是一款适用于 Windows 和 macOS 系统的延时摄影视频制作软件&#xff0c;可以帮助用户创建高质量的延时摄影视频。该软件提供了直观的界面和丰富的功能&#xff0c;支持多种时间轴摄影工具和文件格式&#xff0c;并具有高度的可定制性和扩展性。 lrTimelapse ma…...

Mac电脑怎么运行 Office 办公软件

虽然 Office 软件也有 Mac 版本的&#xff0c;但是有蛮多小伙伴用起来还是感觉不得劲&#xff0c;毕竟接触了太久的 Windows&#xff0c;所以想要使用 Windows 版本的 Office 软件。 今天就给大家介绍一下怎么在 Mac 电脑中运行 Windows 版本的办公软件&#xff0c;在这里就需…...

FPGA 如何 固化程序到 FLASH中

1、导出Hardware 2、导出bit文件 3、打开SDK 4、 点击Ok 5、创建工程 6、 输入工程名称&#xff1a;guhua 7、选择 Zynq FSBL 8、单击 guhua、然后点击 build 点击&#xff1a;build all 9、 右键之后&#xff0c;点击&#xff1a;Creat Boot Image 10、点击 Cr…...

电源管理(PMIC)MAX20428ATIA/VY、MAX20428ATIC/VY、MAX20428ATIE/VY适合汽车ADAS应用的开关稳压器

一、概述 MAX20428是一款高效率、八路输出、低压PMIC。OUT1将输入电源升压至5V&#xff0c;电流高达500mA&#xff0c;而三个同步降压转换器的输入电压范围为3.0V至4.2V&#xff0c;输出电压范围为0.8V至3.9875V&#xff0c;峰值电流分别高达1.3A、1.3A和3.5A。三个300mA pMOS…...

十年JAVA搬砖路——Linux搭建Ldap服务器。

1.安装命令 yum -y install openldap compat-openldap openldap-clients openldap-servers openldap-servers-sql openldap-devel2.启动ldap systemctl start slapd systemctl enable slapd3.修改密码 slappasswd Aa123456获得返回的密码加密密码串&#xff1a; {SSHA}DkSw0…...

论文 辅助笔记:t2vec train.py

1 train 1.1 加载training和validation数据 def train(args):logging.basicConfig(filenameos.path.join(args.data, "training.log"), levellogging.INFO)设置了日志的基本配置。将日志信息保存到名为 "training.log" 的文件中日志的级别被设置为 INFO&…...

同时标注分割、检测、多分类属性的工具

1、 https://blog.csdn.net/minstyrain/article/details/82385580/ 2、 https://zhuanlan.zhihu.com/p/656703406...

LeetCode75——Day24

文章目录 一、题目二、题解 一、题目 2390. Removing Stars From a String You are given a string s, which contains stars *. In one operation, you can: Choose a star in s. Remove the closest non-star character to its left, as well as remove the star itself.…...

B端企业形象设计的正确姿势,你学会了吗?

如今&#xff0c;企业形象设计在B端市场中变得越来越重要。它是企业与客户之间建立联系的桥梁&#xff0c;也是吸引目标客户的重要方式。为了帮助您打造一个独特而专业的企业形象设计&#xff0c;我将为您提供十个步骤。 步骤1&#xff1a;了解企业定位和目标 在设计B端企业形…...

我在Vscode学OpenCV 基本的加法运算

根据上一篇我们可知__图像的属性 链接&#xff1a;《我在Vscode学OpenCV 处理图像》 属性— API 形状 img.shape 图像大小 img.size 数据类型 img.dtype  shape&#xff1a;如果是彩色图像&#xff0c;则返回包含行数、列数、通道数的数组&#xff1b;如果是二值图像或者灰度…...

数据结构与算法解析(C语言版)--线性表

本栏目致力于从0开始使用纯C语言将经典算法转换成能够直接上机运行的程序&#xff0c;以项目的形式详细描述数据存储结构、算法实现和程序运行过程。 参考书目如下&#xff1a; 《数据结构C语言版-严蔚敏》 《数据结构算法解析第2版-高一凡》 软件工具&#xff1a; dev-cpp 0…...

pthread 名字设置及线程标识符获取

pthread 名字设置及ID获取 pthread_setname_np 函数原型&#xff1a; int pthread_setname_np(pthread_t thread, const char *name);thread&#xff1a;要设置名称的线程标识符&#xff08;pthread_t&#xff09;。name&#xff1a;要设置的线程名称&#xff08;以字符串形式…...

17、Flink 之Table API: Table API 支持的操作(1)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…...

Ubuntu:解决PyCharm中不能输入中文或者输入一个中文解决方法

1.问题&#xff1a; Ubuntu22.04中&#xff0c;在pycharm里打字输入中文&#xff0c;每次都是只能输入第一个中文&#xff0c;后面输入的都变成了英文字母。。。无论咋调输入法&#xff0c;都没用&#xff0c;反正除了第一个字其他的输进去都是英文&#xff0c;而且汉字下面还…...

Vue3.0 reactive与ref :VCA模式

简介 Vue3 最大的一个变动应该就是推出了 CompositionAPI&#xff0c;可以说它受ReactHook 启发而来&#xff1b;它我们编写逻辑更灵活&#xff0c;便于提取公共逻辑&#xff0c;代码的复用率得到了提高&#xff0c;也不用再使用 mixin 担心命名冲突的问题。 ref 与 reactive…...

项目实战 | 使用Linux宝塔面板搭建商城公众号小程序基础框架

项目实战 | 使用Linux宝塔面板搭建商城公众号&小程序基础框架 1. 小程序/公众号运行的必备条件2. 准备阿里云ECS主机3. 宝塔面板基本配置4. 通过宝塔面板安装相关服务5. 新建站点并进行初始配置6. 服务配置6.1. PHP配置6.2. 数据库配置6.3. Redis配置6.4. 消息队列Supervis…...

IDEA远程调试代码

IDEA->RUN->Edit Configurations 端口随便选一个&#xff0c;选择调试模块&#xff0c;然后用IDEA生成的命令调试 java -agentlib:jdwptransportdt_socket,servery,suspendn,address*:8081 -jar backend-1.18.11.jar &...

目标检测 图像处理 计算机视觉 工业视觉

目标检测 图像处理 计算机视觉 工业视觉 工业表盘自动识别&#xff08;指针型和数值型&#xff09;智能水尺识别电梯中电动车识别&#xff0c;人数统计缺陷检测&#xff08;半导体&#xff0c;电子元器件等&#xff09;没带头盔检测基于dlib的人脸识别抽烟检测和睡岗检测/驾驶疲…...

Miri最佳实践清单:构建安全Rust代码的20条黄金法则

Miri最佳实践清单&#xff1a;构建安全Rust代码的20条黄金法则 【免费下载链接】miri An interpreter for Rusts mid-level intermediate representation 项目地址: https://gitcode.com/GitHub_Trending/mi/miri Miri是Rust的中级中间表示解释器&#xff0c;它能帮助开…...

终极指南:Brontes区块链分析引擎的Cargo.toml依赖管理策略

终极指南&#xff1a;Brontes区块链分析引擎的Cargo.toml依赖管理策略 【免费下载链接】brontes A blazingly fast general purpose blockchain analytics engine specialized in systematic mev detection 项目地址: https://gitcode.com/GitHub_Trending/br/brontes B…...

OpenCore技术方案:老旧设备系统兼容性深度解析与性能优化评估

OpenCore技术方案&#xff1a;老旧设备系统兼容性深度解析与性能优化评估 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 1. 问题剖析&#xff1a;为何老旧Ma…...

intv_ai_mk11部署避坑指南:端口映射失败、响应延迟、乱码重复等问题解决方案

intv_ai_mk11部署避坑指南&#xff1a;端口映射失败、响应延迟、乱码重复等问题解决方案 1. 环境准备与快速部署 1.1 系统要求 操作系统&#xff1a;Ubuntu 20.04/22.04 LTSGPU&#xff1a;NVIDIA显卡&#xff08;至少16GB显存&#xff09;内存&#xff1a;32GB以上存储&…...

AirPods Pro 3 与 Bose QC Ultra Earbuds 2:无线耳机市场的激烈较量

AirPods Pro 3 与 Bose QC Ultra Earbuds 2&#xff1a;新功能大比拼最新款的 AirPods Pro 3 引入了一系列新功能&#xff0c;提升了音频效果&#xff0c;增强了降噪能力&#xff0c;还具备助听模式、实时翻译、自动切换、空间音频、心率监测等附加功能。而 Bose QuietComfort …...

Phi-4-mini-reasoning快速部署:Conda环境+PyTorch2.8适配避坑指南

Phi-4-mini-reasoning快速部署&#xff1a;Conda环境PyTorch2.8适配避坑指南 1. 项目概述 Phi-4-mini-reasoning是微软推出的3.8B参数轻量级开源模型&#xff0c;专为数学推理、逻辑推导和多步解题等强逻辑任务设计。这个模型主打"小参数、强推理、长上下文、低延迟&quo…...

AlphaFold单元测试:代码质量保证

AlphaFold单元测试&#xff1a;代码质量保证 【免费下载链接】alphafold Open source code for AlphaFold 2. 项目地址: https://gitcode.com/GitHub_Trending/al/alphafold 引言&#xff1a;为什么AlphaFold需要严格的单元测试&#xff1f; AlphaFold作为革命性的蛋白…...

微软 Copilot 条款更新:功能拓展与合规管控并行

微软 Copilot 条款更新&#xff1a;明确适用范围与新增功能规则微软 Copilot 此次更新使用条款&#xff0c;明确了条款适用于某些 Copilot 服务和体验的具体情形。新增了关于 Copilot Actions、Copilot Labs 和购物体验的条款&#xff0c;还修订了行为准则&#xff0c;清晰界定…...

避开这3个坑,你的软考数据库设计题至少多拿10分:从E-R图合并冲突到SQL约束实战

软考数据库设计题避坑指南&#xff1a;从E-R图到SQL约束的实战技巧 每次软考结束&#xff0c;总有一批考生捶胸顿足——"那道数据库设计题明明会做&#xff0c;怎么又丢分了&#xff1f;"作为参加过三次软考阅卷的数据库讲师&#xff0c;我发现90%的失分都集中在几个…...

一键部署雪女-斗罗大陆-造相Z-Turbo:小白也能轻松生成动漫女神

一键部署雪女-斗罗大陆-造相Z-Turbo&#xff1a;小白也能轻松生成动漫女神 1. 镜像简介与核心功能 1.1 什么是雪女-斗罗大陆-造相Z-Turbo 雪女-斗罗大陆-造相Z-Turbo是一款基于Xinference部署的文生图AI模型服务&#xff0c;专门用于生成斗罗大陆中雪女角色的高质量动漫图像…...