5.(vue3.x+vite)水平垂直居中实现方式

news2024/12/22 20:41:02

前端技术社区总目录(订阅之前请先查看该博客)

示例效果

在这里插入图片描述

介绍

(1)父级元素设置position:relative;
子级元素设置:position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);
兼容性较好
(1)父级元素设置弹性盒子:display:flex;justify-content:center; align-items:center
IE11不支持
(2)父级元素设置网格元素:display:grid;justify-content:center; align-items:center
IE10不支持
(4)父级元素设置表格元素:display:table-cell;text-align: center;vertical-align: middle
子级元素设置:display: inline-block;
兼容性较好

组件代码


                

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

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

相关文章

LabVIEW幅频特性测试系统

使用LabVIEW软件开发的幅频特性测试系统。该系统整合了Agilent 83732B信号源与Agilent 8563EC频谱仪,通过LabVIEW编程实现自动控制和数据处理,提供了成本效益高、操作简便的解决方案,有效替代了昂贵的专用仪器,提高了测试效率和设…

library source does not match the bytecode for class SpringApplication

library source does not match the bytecode for class SpringApplication 问题描述:springboot源码点进去然后download source后提示标题内容。spring版本5.2.8.RELEASE,springboot版本2.7.18 解决方法:把spring版本改为与boot版本对应的6.…

如何快速去除视频里面的水印字幕等信息?(内附工具)

环境: VSR 需要独显 GPU:N 4070TI 12G 问题描述: 如何快速去除视频里面的水印字幕等信息? 解决方案: 1.打开AI工具VSR,打了要处理的视频 2.右侧滑块调整绿色选框,选中要去的字幕或者水印 这次测试右…

维克日记 v0.4.2:开发者友好的数字化笔记工具

维克日记,专为技术开发者和笔记爱好者设计的数字化笔记工具,以其强大的功能和灵活的配置赢得了用户的好评。软件采用Markdown语法,提供实时预览功能,让您的笔记编辑更加高效和直观。维克日记的用户界面简洁而功能齐全,…

k8s 中间件

1. zookeeper 是的,Zookeeper 和 Kafka 经常一起使用,Zookeeper 在 Kafka 中扮演了关键角色。以下是 Zookeeper 和 Kafka 在实际项目中的结合使用及其作用的详细说明。 项目背景 假设我们有一个分布式数据处理系统,该系统需要高吞吐量的实…

Webpack: 剖析插件基本形态与架构逻辑

概述 Webpack 对外提供了 Loader 与 Plugin 两种扩展方式,其中 Loader 职责比较单一,开发方法比较简单容易理解;Plugin 则功能强大,借助 Webpack 数量庞大的 Hook,我们几乎能改写 Webpack 所有特性,但也伴…

改变图像中特定区域的颜色

背景与原理 再训练施工即系模型中,发现大量施工机械都是黄色的,我需要把它们换成蓝色的,以增强模型使用可靠性。 目前没有尝试深度学习算法,只是简单的进行了处理。 核心目的:通过人工标注与opencv的结合&#xff0…

Cybervadis认证是什么?

Cybervadis认证是一种全面且深入的网络安全评估和认证服务,旨在帮助组织提高其网络安全实践的成熟度,并有效应对不断变化的网络威胁和攻击。以下是关于Cybervadis认证的一些关键信息: 认证目的: 评估和验证组织在网络安全方面的能…

使用目标检测模型YOLO V10 OBB进行旋转目标的检测:训练自己的数据集(基于卫星和无人机的农业大棚数据集)

这个是在YOLO V10源码的基础上实现的。我只是在源码的基础上做了些许的改动。 YOLO V10源码:YOLO V10源码 YOLOv10是清华大学的研究人员在Ultralytics Python包的基础上,引入了一种新的实时目标检测方法,解决了YOLO 以前版本在后处理和模型架…

计组_虚拟存储器

2024.06.09:计算机组成原理学习笔记 第11节 虚拟存储器* 1.1 分页思想1.1.1 虚拟地址/逻辑地址1.1.2 主存地址/物理地址1.1.3 页表1.1.4 分页方式的缺陷 1.2 分段思想1.2.1 虚拟地址/逻辑地址1.2.2 主存地址/物理地址1.2.3 段表 1.3 段页式思想1.3.1 虚拟地址/逻辑地…

分布式技术专题 | TCP在分布式网络中的通信机制与底层实现

深入解析分布式网络中的TCP通信协议实现 跨地域通信与资源共享网络节点与主机的定义网络技术通信机制TCP/IP协议模型TCP/IP分层机制TCP的Socket链接处理控制TCP的优势和特性自动差错控制正确性和有序性 TCP的Socket使用端口在应用程序间通信TCP的Socket使用端口套接字操作 跨地…

5G(NR) NTN 卫星组网架构

5G(NR) NTN 卫星组网架构 参考 3GPP TR 38.821 5G NTN 技术适用于高轨、低轨等多种星座部署场景,是实现星地网络融合发展的可行技术路线。5G NTN 网络分为用户段、空间段和地面段三部分。其中用户段由各种用户终端组成,包括手持、便携站、嵌入式终端、车…

鸿蒙应用开发-时间屏幕

点击下载源码: https://download.csdn.net/download/liuhaikang/89509449 做一个时间屏幕,可以点击切换白色和黑色,有渐变效果,使用到了鸿蒙的动画效果。 在这个设计中,我们首先引入了通用能力包,以实现功…

uniapp做小程序内打开地图展示位置信息

使用场景&#xff1a;项目中需要通过位置信息打开地图查看当前位置信息在地图那个位置&#xff0c;每个酒店有自己的经纬度和详细地址&#xff0c;点击地图按钮打开内置地图如图 方法如下&#xff1a; <view class"dttu" click"openMap(info.locationY,info.…

24/07/02数据结构(1.1201)算法效率顺序表

数据结构基本内容:1.时间复杂度 空间复杂度2.顺序表链表3.栈 队列4.二叉树5.排序 数据结构是存储,组织数据的方式.指相互之间存在一种或多种特定关系的数据元素的集合 算法是定义良好的计算过程.取一个或一组值为输入并产生一个或一组值为输出. 需要知道虽然选择题有20-30个…

什么是Java泛型擦除?

JDK1.5之后引入泛型擦除的概念。 目录 验证逻辑 实际编译后的结果&#xff1a; 验证例子&#xff1a; 两个类型相同&#xff0c;表面泛型都被擦出了&#xff0c;都是Arraylist。 List<String> list1 new Arraylist<>(); List<Integer> list2 new Arrayli…

自动化一些操作

下拉选择框 from selenium import webdriver from time import sleep # 导包 from selenium.webdriver.support.select import Select driver webdriver.Edge() driver.get(r"D:\WORK\ww\web自动化_day01_课件笔记资料代码\web自动化_day01_课件笔记资料代码\02_其他资料…

配置windows环境下独立浏览器爬虫方案【不依赖系统环境与chrome】

引言 由于部署浏览器爬虫的机器浏览器版本不同&#xff0c;同时也不想因为部署了爬虫导致影响系统浏览器数据&#xff0c;以及避免爬虫过程中遇到的chrome与webdriver版本冲突。我决定将特定版本的chrome浏览器与webdriver下载到项目目录内&#xff0c;同时chrome_driver在初始…

【车载开发系列】SPI总线通信技术

【车载开发系列】SPI总线通信技术 【车载开发系列】SPI总线通信技术 【车载开发系列】SPI总线通信技术一. 什么是SPI二. 应用范围三. 协议特点1&#xff09;传输速率2&#xff09;主要功能3&#xff09;拓扑结构4&#xff09;接口配置 四. SPI总线原理五. 信号列表六. SPI传输时…

攻防世界-WEB-catcat-new

前言 .................. 开干 正文 信息收集 有意思 估计是权限不够导致无法访问 我们点击几只小猫看看有什么东西 好的,?File 试试看是否存在任意文件读取 思路 成功,接下来我们尝试获取历史记录 这里补充一下知识点 /proc/self proc是一个伪文件系统&#xff0c;它提…