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

CSS transition 过渡

1 前言

水平居中、垂直居中是前端面试百问不厌的问题。

其实现方案也是多种多样,常叫人头昏眼花。

水平方向可以认为是内联方向,垂直方向认为是块级方向。

下面介绍一些常见的方法。

2 内联元素的水平垂直居中

首先,常见内联元素有:a、span、em、b、strong、i、button

<div class="container"><span class="innerText">Hello,World!</span>
</div>

2.1 使用display: flex

dispaly: flex将父级容器设置为弹性布局,然后可以通过justify-content: center控制水平居中,使用align-items: center控制垂直居中。

.container {height: 100px;width: 200px;background-color: cadetblue;display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;
}

2.2 使用text-align和line-hight

设置父级容器的text-align: center实现文本水平居中对齐,关键的一步设置行高line-height为容器的高度即可实现文本垂直居中。

为什么设置行高line-height为容器的高度就能实现文本垂直居中?

因为文本的基线位于行高的中间,基线也是文本的中线,设置行高等于高度后,文字就垂直居中了。

.container {height: 100px;width: 200px;background-color: antiquewhite;/* 水平居中 */text-align: center;/* 垂直居中,行高等于高度 */line-height: 100px;
}

2.3 使用text-align和display: table-cell

将元素设置为单元格,再使用vertical-align: center实现垂直居中。

.container {height: 100px;width: 200px;background-color: antiquewhite;display: table-cell;/* 水平居中 */text-align: center;/* 垂直居中 */vertical-align: middle;
}

2.4 使用display: grid

.container {height: 100px;width: 200px;background-color: antiquewhite;display: grid;place-items: center;
}

place-items是align-items、justify-items的简写。

3 块级元素的水平垂直居中

常见块级元素有:h1-h6、p、div、ul、ol、li等。

<div class="container"><div class="innerText"></div>
</div>

前面介绍的内联元素的水平垂直居中方法也适用于块级元素。下面就不再重复介绍。

3.1 定位+间距的多种组合

设置父元素为相对定位。

为什么要设置父元素为相对定位?

  1. 创建一个提供给子元素的定位坐标系,使得子元素在该坐标系内定位。
  2. 绝对定位的元素会脱离正常文档流,并相对于最近的已定位组件进行定位。
  3. margin: auto计算居中位置依赖于外部的相对定位的父元素。

设置子元素为绝对定位,其top、left、right、bottom的值设为0,margin为auto即可让子元素自动调整四周距离一样实现水平垂直居中。

.container {height: 100px;width: 200px;background-color: cadetblue;position: relative;
}
.innerText {background-color: black;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 50px;height: 50px;/* 水平垂直居中 */margin: auto;
}

使用负margin值实现元素的平移。

.container {height: 100px;width: 200px;background-color: cadetblue;position: relative;
}
.innerText {width: 50px;height: 50px;background-color: black;position: absolute;top: 50%;left: 50%;margin: -25px 0 0 -25px;
}

使用translate实现元素的平移。

.container {height: 100px;width: 200px;background-color: cadetblue;position: relative;
}
.innerText {width: 50px;height: 50px;background-color: black;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}

相关文章:

CSS transition 过渡

1 前言 水平居中、垂直居中是前端面试百问不厌的问题。 其实现方案也是多种多样&#xff0c;常叫人头昏眼花。 水平方向可以认为是内联方向&#xff0c;垂直方向认为是块级方向。 下面介绍一些常见的方法。 2 内联元素的水平垂直居中 首先&#xff0c;常见内联元素有&…...

Unity中Shader的UV扭曲效果的实现

文章目录 前言一、实现的思路1、在属性面板暴露一个 扭曲贴图的属性2、在片元结构体中&#xff0c;新增一个float2类型的变量&#xff0c;用于独立存储将用于扭曲的纹理的信息3、在顶点着色器中&#xff0c;根据需要使用TRANSFORM_TEX对Tilling 和 Offset 插值&#xff1b;以及…...

Automotive 添加一个特权APP

Automotive 添加一个特权APP platform: android-13.0.0_r32 一. 添加一个自定义空调的app为例 路径&#xff1a;packages/apps/Car/MyHvac app内容可以自己定义&#xff0c;目录结构如下&#xff1a; 1.1 Android.bp package {default_applicable_licenses: ["Andr…...

自定义TimeLine

自定义TimeLine 什么是TimeLineData&#xff08;数据&#xff09;Clip&#xff08;片段&#xff09;Track&#xff08;轨道&#xff09;Mixer&#xff08;混合&#xff09; 什么是TimeLine 在 Unity 中&#xff0c;TimeLine&#xff08;时间轴&#xff09;是一种用于创建和管理…...

如何使用SQL系列 之 如何在SQL中使用WHERE条件语句

引言 在结构化查询语言 (SQL)语句中&#xff0c;WHERE子句限制了给定操作会影响哪些行。它们通过定义特定的条件(称为搜索条件)来实现这一点&#xff0c;每一行都必须满足这些条件才能受到操作的影响。 本指南将介绍WHERE子句中使用的通用语法。它还将概述如何在单个WHERE子句…...

leetcode:1941. 检查是否所有字符出现次数相同(python3解法)

难度&#xff1a;简单 给你一个字符串 s &#xff0c;如果 s 是一个 好 字符串&#xff0c;请你返回 true &#xff0c;否则请返回 false 。 如果 s 中出现过的 所有 字符的出现次数 相同 &#xff0c;那么我们称字符串 s 是 好 字符串。 示例 1&#xff1a; 输入&#xff1a;s…...

Echarts 各种点击事件监听

目录 一、鼠标事件1.1、左击1.2、双击1.3、右击1.4、右键双击1.5、中轴滚动二、时间轴2.1、时间轴监听三、拖动3.1、拖动事件一、鼠标事件 1.1、左击 chart.on(click, function(params)...

《智能网联汽车自动驾驶功能测试规程》

一、 编制背景 2018 年4 月12 日&#xff0c;工业和信息化部、公安部、交通运输部联合发布《智能网联汽车道路测试管理规范(试行)》&#xff08;以下简称《管理规范》&#xff09;&#xff0c;对智能网联汽车道路测试申请、审核、管理以及测试主体、测试驾驶人和测试车辆要求等…...

NVIDIA CUDA Win10安装步骤

前言 windows10 版本安装 CUDA &#xff0c;首先需要下载两个安装包 CUDA toolkit&#xff08;toolkit就是指工具包&#xff09;cuDNN 1. 安装前准备 在安装CUDA之前&#xff0c;需要完成以下准备工作&#xff1a; 确认你的显卡已经正确安装&#xff0c;在设备管理器中可以看…...

Elasticsearch、Kibana以及Java操作ES 的快速使用

docker 安装elastic search 、 kibana&#xff08;可视化管理elastic search&#xff09; docker pull elasticsearch:7.12.1 docker pull kibana:7.12.1创建docker自定义网络 docker自定义网络可以使得容器之间使用容器名网络互连&#xff0c;默认的网络不会有这功能。 一定…...

逐鹿人形机器人,百度、腾讯、小米卷起来

长期不温不火的人形机器人产业迎来新风口&#xff0c;技术显著提升、新品层出不穷、资本投资态度也逐渐好转。 8月18日&#xff0c;2023世界机器人大会博览会正式开放&#xff0c;全面展示了机器人行业的新技术、新产品和新应用。据悉&#xff0c;此次展会展览总面积达4.5万平…...

AndroidStudio推荐下载和配置

1、推荐下载链接 Download Android Studio & App Tools - Android Developers 2、gradle配置案例 // Top-level build file where you can add configuration options common to all sub-projects/modules.buildscript {repositories {maven { url https://maven.aliyun.…...

mysql异常占用资源排查

通过执行日志与连接信息排查 查看是否开启日志记录 mysql> show global variables like %general%; --------------------------------- | Variable_name | Value | --------------------------------- | general_log | OFF | | general_log_file…...

requests 库:发送 form-data 格式的 http 请求 (python)

安装 requests-toolbelt !pip install requests-toolbeltdemo from requests_toolbelt import MultipartEncoder import requestsm MultipartEncoder(fields{query: """第一&#xff0c;向量化匹配是有能力上限的。搜索引擎实现语义搜索已经是好几年的事情了…...

行测图形推理规律(一)元素组成

题库&#xff1a;粉笔网题库 (fenbi.com) 不知道和测评的行测题库是不是一样的&#xff0c;但是总结的规律应该是一样的。 规律并不唯一&#xff0c;题库的答案也只是参考答案&#xff0c;切勿当杠精&#xff0c;你觉得你的规律更合适就别管。本人所归纳的规律仅代表本人想法…...

【python爬虫】13.吃什么不会胖(爬虫实操练习)

文章目录 前言项目实操明确目标分析过程代码实现 前言 吃什么不会胖——这是我前段时间在健身时比较关注的话题。 相信很多人&#xff0c;哪怕不健身&#xff0c;也会和我一样注重饮食的健康&#xff0c;在乎自己每天摄入的食物热量。 不过&#xff0c;生活中应该很少有人会…...

深入理解联邦学习——联邦学习与现有理论的区别与联系

分类目录&#xff1a;《深入理解联邦学习》总目录 作为一种全新的技术&#xff0c;联邦学习在借鉴一些成熟技术的同时也具备了一定的独创性。下面我们就从多个角度来阐释联邦学习和其他相关概念之间的关系。 联邦学习与差分隐私理论的区别 联邦学习的特点使其可以被用来保护用…...

基于Python+DenseNet121算法模型实现一个图像分类识别系统案例

目录 介绍在TensorFlow中的应用实战案例最后 一、介绍 DenseNet&#xff08;Densely Connected Convolutional Networks&#xff09;是一种卷积神经网络&#xff08;CNN&#xff09;架构&#xff0c;2017年由Gao Huang等人提出。该网络的核心思想是密集连接&#xff0c;即每…...

旋转图片两种方法

这两种方法在旋转图像时&#xff0c;可能会产生一些不同的效果&#xff1a; rotate_image_new()旋转后的图像完全包含旋转前的内容&#xff0c;并且填充边界尽可能小 rotate_image() 保持原始图像的大小&#xff0c;并根据填充选项决定是否填充边界为白色。如果 if_fill_whit…...

10 mysql tiny/small/medium/big int 的数据存储

前言 这里主要是 由于之前的一个 datetime 存储的时间 导致的问题的衍生出来的探究 探究的主要内容为 int 类类型的存储, 浮点类类型的存储, char 类类型的存储, blob 类类型的存储, enum/json/set/bit 类类型的存储 本文主要 的相关内容是 int 类类型的相关数据的存储 …...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点(小球运动模拟)6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...