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

【CSS】水平垂直居中

  1. 给父盒子设置属性 flex

    • display: flex;写在父元素上这就是定义了一个伸缩容器
    • justify-content:center 设置主轴对齐方式为居中,默认是横轴。子元素居中。
    • align-items:center 设置纵轴对齐方式为居中,默认是纵轴。子元素居中。
  2. 给父盒子和子盒子设置属性

    给容器设置 display: flex; 子项设置 margin: auto;

  3. 绝对定位设置居中

    容器设置position: relative。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);

    优点就是不用关心子元素的长和宽,但是这种方法兼容性依赖 translate2d 的兼容性

  4. 绝对定位另一种方法
    需要给子元素设置 position: absolute; 设置固定宽度和高度;top、left、bottom、right都设置为0; margin设置为auto;也能实现垂直水平居中。

flex:1 的作用

  • 首先 flex: 1; 等同于 flex: 1 1 auto;
  • flex: 1 实际上是三个属性的缩写:flex-grow: 1; flex-shrink: 1 flex-basis: auto;

相关文章:

【CSS】水平垂直居中

给父盒子设置属性 flex display: flex;写在父元素上这就是定义了一个伸缩容器justify-content:center 设置主轴对齐方式为居中,默认是横轴。子元素居中。align-items:center 设置纵轴对齐方式为居中,默认是纵轴。子元素居中。 给…...

欧盟零毁林法案 EUDR

EUDR法案,即欧盟零毁林法案(EU Deforestation Regulation),是欧盟为了减少全球森林砍伐和退化,应对气候变化和生物多样性丧失而制定的一项重要法规。以下是对该法案的详细解读: 一、法案背景与目的 EUDR法…...

26.删除有序数组中的重复项

题目::26. 删除有序数组中的重复项 - 力扣&#xff08;LeetCode&#xff09; 思路:只要不和前面的数一样就可以移动指针&#xff0c;进行赋值 代码: class Solution { public:int removeDuplicates(vector<int>& nums) {int slow 0 ;for(int fast 1; fast < …...

JAVA实现公众号扫码登录和关注功能实战

前言 使用第三方插件 <dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-mp</artifactId><version>4.6.0</version> </dependency>准备APPID和appSecet 登录微信公众号后台&#xff0c;复制ap…...

初识Mysql/备份,基础指令

1&#xff0c;MySQL登录指令&#xff1a; mysql -h 127.0.0.1 -P3306 -u -p 其中&#xff0c;-h指明登录部署了mysql服务的主机 -P指明要访问的端口号&#xff0c; -u指明登录用户 -p输入密码 2&#xff0c;数据库基础 mysql&#xff1a;表示的是客户端 mysqld&…...

没想到吧!线稿上色居然可以这么简单

前言 在创意无限的数字艺术世界里&#xff0c;艺术创作中的线稿上色&#xff0c;向来是件既费时又需技巧的活儿&#xff0c;寻找一款既能激发灵感又能简化繁琐流程的工具&#xff0c;是每位艺术家心中的向往。 今天&#xff0c;为大家推荐一款革命性的线稿上色AI工具——千鹿…...

修改Docker的默认存储路径

docker默认存储路径&#xff1a;/var/lib/docker/ 执行 docker info 查看&#xff0c;得到以下信息 Docker Root Dir: /var/lib/docker/Debug Mode: falseRegistry: https://index.docker.io/v1/Labels:Experimental: falseInsecure Registries: 1.修改docker配置 要修改默认…...

深入计算机语言之C++:C到C++的过度

&#x1f511;&#x1f511;博客主页&#xff1a;阿客不是客 &#x1f353;&#x1f353;系列专栏&#xff1a;从C语言到C语言的渐深学习 欢迎来到泊舟小课堂 &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 一、什么是C C&#xff08;c plus plus&#xff…...

HR面试篇

一.面试中被问职业规划 HR感兴趣的不是你的职业规划,感兴趣的是你的职业规划和他们公司有没有关系。 或者说他们公司能不能去帮助你去实现你的职业规划。 切忌不要讲不合实际的,比如要在公司赚多少钱等等。 要根据公司的特点,找到切入点,只要讲得积极向上就可以。 二.…...

深度探索Kali Linux的精髓与实践应用

Kali Linux简介 Kali Linux作为全球网络安全领域的首选操作系统之一&#xff0c;其强大的功能性及广泛的适用范围令人瞩目。除了上述基础介绍外&#xff0c;让我们深入探究Kali Linux的几个关键特性及其在实际操作中的具体应用案例。 Kali工具集成&#xff1a;全面的安全工具…...

【在Linux世界中追寻伟大的One Piece】DNS与ICMP

目录 1 -> DNS(Domain Name System) 1.1 -> DNS背景 2 -> 域名简介 2.1 -> 域名解析过程 3 -> 使用dig工具分析DNS 4 -> ICMP协议 4.1 -> ICMP功能 4.2 -> ICMP报文格式 4.3 -> Ping命令 4.4 -> traceroute命令 1 -> DNS(Domain Na…...

信息安全工程师(41)VPN概述

前言 VPN&#xff0c;即Virtual Private Network&#xff08;虚拟专用网络&#xff09;的缩写&#xff0c;是一种通过公共网络&#xff08;如互联网&#xff09;创建私密连接的技术。 一、定义与工作原理 定义&#xff1a;VPN是依靠ISP&#xff08;Internet Service Provider&…...

算法:双指针系列(一)

双指针系列 一、移动零&#xff08;一&#xff09;题目分析&#xff08;二&#xff09;代码展示二、复写零&#xff08;一&#xff09;题目分析&#xff08;二&#xff09;代码展示三、快乐数&#xff08;一&#xff09;题目分析&#xff08;二&#xff09;代码展示&#xff08…...

跟《经济学人》学英文:2024年09月28日这期 The curse of the Michelin star

The curse of the Michelin star Restaurants awarded the honour are more likely to close, research finds 原文&#xff1a; The twelve new restaurants added to the New York Michelin Guide this month, serving up cuisine ranging from “haute French” to “eco…...

Java Set 的介绍与实现原理

什么是 Set 在 Java 中&#xff0c;Set 是一种集合类型&#xff0c;它不允许重复的元素。Set 接口是 Java Collections Framework 的一部分&#xff0c;主要用于存储不重复的值。常见的实现类包括 HashSet、LinkedHashSet 和 TreeSet。 实现原理 1. HashSet HashSet 是最常…...

我谈均值平滑模板——给均值平滑模板上升理论高度

均值平滑&#xff08;Mean Smoothing&#xff09;&#xff0c;也称为盒状滤波&#xff08;Box Filter&#xff09;&#xff0c;通过计算一个像素及其周围像素的平均值来替换该像素的原始值&#xff0c;从而达到平滑图像的效果。 均值平滑通常使用一个模板&#xff08;或称为卷…...

WordPress添加https协议致使后台打不开解决方法

由于删除WordPress缓存插件后操作不当&#xff0c;在加上升级处理&#xff0c;致使茹莱神兽博客的首页出现了https不兼容问题&#xff0c;WordPress后台也无法登陆&#xff0c;链接被误认为是定向重置次数过多&#xff0c;在网上找了好久的答案。 还有就是求助了好些人&#xf…...

如何使用pymysql和psycopg2执行SQL语句

在Python中&#xff0c;pymysql和psycopg2是两个非常流行的库&#xff0c;用于与MySQL和PostgreSQL数据库进行交互。本文将详细介绍如何使用这两个库来执行SQL查询、插入、更新和删除操作。 1. 准备工作 首先&#xff0c;确保已经安装了pymysql和psycopg2库。如果尚未安装&a…...

linux无法使用ll命令

ll命令是ls -l的别名&#xff0c;无法使用通常是该用户没有该别名配置&#xff0c;只需要简单添加即可使用 修改~/.bashrc # 备份 cp ~/.bashrc ~/.bashrc.source # 编辑 vim ~/.bashrc添加如下内容 # 别名 alias llls -l加载配置 source ~/.bashrc...

STM32输入捕获模式详解(上篇):原理、测频法与测周法

1. 前言 在嵌入式系统的开发过程中&#xff0c;常常需要对外部信号进行精确的时间测量&#xff0c;如测量脉冲信号的周期、频率以及占空比等。STM32系列微控制器提供了丰富的定时器资源&#xff0c;其中的输入捕获&#xff08;Input Capture, IC&#xff09;模式能实现对信号的…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...