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

面试常问:水平居中和垂直居中的方法

水平居中

  1. 文本居中
    • 如果元素为行内元素,可以将父元素的text-align属性设置为center,这样子元素就会水平居中对齐
.text{text-align: center;
}
  1. 固定宽度的居中
    • 如果元素宽度已知并固定,可以通过将左右margin设置为auto来实现水平居中。
.content{margin-left:auto;margin-right:auto;
}
  1. 绝对定位和移动
    • 可以使用绝对定位和transform来实现水平居中。首先将元素的左边距和右边距都设置为auto,然后使用transform属性将元素向左平移50%。
.content{position: absolute;left: 50%;transform: translateX(-50%);
}
  1. Flexbox布局
.content{display: flex;justify-content: center;
}
  1. 表格布局
    • 将父元素的display属性设置为table-cell,并将text-align属性设置为center。
.content{display: table-cell;text-align: center;
}

垂直居中

  1. 表格布局
    • 将父元素的display属性设置为table,并将子元素的display属性设置为table-cell,然后使用vertical-align属性将子元素垂直居中
    • 未知高度的块级父子元素居中,模拟表格布局
    • 缺点:IE67不兼容,父级 overflow:hidden 失效
.parentcont {display: table;
}
.childCont {display: table-cell;vertical-align: middle;
}
  1. Flex布局
    • 将父元素的display属性设置为flex,并使用align-items属性将子元素垂直居中。
.pacon {display: flex;align-items: center;
}
  1. 绝对定位和负边距
    • 已知高度的子元素,将父元素设置为相对定位,子元素设置为绝对定位,并使用top: 50%将其垂直居中,然后通过负边距的方式将子元素向上移动一半的高度
.parentCon{position: relative;
}
.childCon {position: absolute;top: 50%;margin-top: -`100px; /* 假设子元素高度为200px的一半 */
}
  1. 文本垂直居中
    • 对于单行文本,可以设置父元素的line-height属性和高度相等,从而实现文本的垂直居中
.con{height: 50px;line-height: 50px;
}
  1. CSS3位移
    • 使用CSS3的transform属性的translateY函数将子元素向上位移一半的高度实现垂直居中
.con {position: absolute;top: 50%;transform: translateY(-50%);
}
  1. inline-block兄弟元素
    • 通过在父元素中插入一个inline-block元素,并设置其垂直对齐方式为middle来实现垂直居中
.parentCon {height: 100%;
}
.extracon {display: inline-block;vertical-align: middle;
}
.childcon {display: inline-block;vertical-align: middle;
}

相关文章:

面试常问:水平居中和垂直居中的方法

水平居中 文本居中 如果元素为行内元素,可以将父元素的text-align属性设置为center,这样子元素就会水平居中对齐 .text{text-align: center; }固定宽度的居中 如果元素宽度已知并固定,可以通过将左右margin设置为auto来实现水平居中。 .…...

第七届“蓝帽杯”初赛取证题目分享

前言: 刚刚打完比赛,准备晚上写一下wp,刚好整理一下题目,ctf的题目一般都有,取证不一定,所以我整理一下,方便大家复盘。 题目: 1:【APK取证】涉案apk的包名是&#xff…...

go语言学习之有关变量的知识

文章目录 变量的学习1.变量的使用步骤2.变量的注意事项3.变量使用的三种方式:4.程序中 号的使用5.变量的数据类型1)int数据类型2)小数类型浮点型3)**字符类型**4)**字符串(String)类型**5&…...

算法通过村第8关【青铜】| 二叉树的经典算法题

二叉树的双指针 1.相同的树 思路:递归的挨个比较是否相同 class Solution {public boolean isSameTree(TreeNode p, TreeNode q) {if((p null&&q!null) || (p ! null && q null) || (p!null&&q!null&&p.val ! q.val)){return f…...

Open3D 点云均值滤波

目录 一、算法原理1、均值滤波2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 1、均值滤波 对待处理的当前采样点,选择一个模板,该模板由其邻近的若干个数据点组成,…...

C语言指针入门详解

一、指针简介 指针(Pointer)是C语言的一个重要知识点,其使用灵活、功能强大,是C语言的灵魂指针与底层硬件联系紧密,使用指针可操作数据的地址,实现数据的间接访问指针就是地址,通过访问此地址来获取该地址存储的数据 …...

软件工程(十四) 设计模式之结构型模式(二)

1、组合模式 简要说明 将对象组合成树形结构以表示“整体-部分”的层次结构,使得用户对单个对象和组合对象的使用具有一致性。 速记关键字 树形目录结构 类图如下 由类图其实可以看出,组合模式就是将具有父子关系的结构,组装形成一棵树,并且根据规范,树干节点和叶子节…...

不解压的方式直接更新jar包内部的内容

前言 如果线上直接更新一个class,可以不用解压,直接利用jar命令直接更新jar报的资源和内容 更新jar包内容文件 Jar 工具提供了一个 u 选项,你可以通过修改其清单或添加文件来更新现有 JAR 文件的内容。 添加文件的基本命令具有以下格式&am…...

软件工程(八) UML之类图与对象图

1、类图与对象图 1.1、类图与对象图的概念 类图(class diagram)描述一组类、接口、协作和它们之间的关系 对象图(object diagram)描述一组对象及它们之间的关系、对象图描述了在类图中所建立的事物实例的静态快照。 1.2、类图与对象图的区别 类图和对象图基本上是一样…...

【Unity3D赛车游戏】【五】Unity中汽车加速效果是如何优化的?

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:Uni…...

龙智案例:某大型零售企业如何打造高速、现代化的ITSM体系

在2023 DevOps国际峰会北京站的现场,我们对话了龙智咨询顾问胡若愚,他为我们奖助了一位零售业的大型客户是如何在数字化浪潮中,凭借龙智提供的Jira Service Management产品及服务,打造现代化ITSM平台,提升客户满意度。…...

jdk 03.stream

01.集合处理数据的弊端 当我们在需要对集合中的元素进行操作的时候,除了必需的添加,删除,获取外,最典型的操作就是集合遍历 package com.bobo.jdk.stream; import java.util.ArrayList; import java.util.Arrays; import java.ut…...

“华为杯”研究生数学建模竞赛2018年-【华为杯】C题:对恐怖袭击事件记录数据的量化分析

目录 摘 要: 一、 问题背景与重述 1.1 问题背景 1.2 问题重述 二、 问题分析...

java8的reduce方法

在 Java 8 中&#xff0c;reduce 是一个流操作方法&#xff0c;用于将流中的元素按照指定的操作进行归约&#xff08;reduce&#xff09;操作&#xff0c;最终得到一个结果。 reduce 方法有三种重载形式&#xff1a; T reduce(T identity, BinaryOperator<T> accumulato…...

Mac发现有的软件不能上网的破解之法

1、Mac上打开终端 terminal &#xff0c;获取 root 权限。 sudo -i 2、编辑 hosts 文件 vim /private/etc/hosts 3、找到被禁止软件的数据请求域名&#xff0c;然后删除相关行&#xff0c;快捷件dd&#xff0c;然后:wq保存退出 比如百度 127.0.0.1 pan.baidu.com ##sec 印…...

定时检测接口是否正常飞书告警脚本

第一版 支持多个接口地址,循环检测,定时每分钟执行一次脚本 告警效果 脚本 飞书机器人创建忽略跳过,各大协作平台大同小异拿出机器人hook地址 #!/bin/bash URL_LIST=(https://gatewaxxxxxxxxxxxxxxxxxx https://sandbox-gatexxxxxxxxxxxxxxxxxx)for URL in ${URL_LIST[*...

【MySQL】2、MySQL数据库的管理

常用 describe user; Field:字段名称 Type:数据类型 Null :是否允许为空 Key :主键 Type:数据类型 Null :是否允许为空key :主键 Default :默认值 Extra :扩展属性&#xff0c;例如:标志符列&#xff08;标识了种子&#xff0c;增量/步长&#xff09;1 2 id&#xff1a;1 3 5 …...

8086汇编test指令学习

Test指令将两个操作数进行逻辑与运算&#xff0c;并根据运算结果设置相关的标志位。Test的两个操作数不会被改变。运算结果在设置过相关标记位后会被丢弃。 TEST AX,BX 与 AND AX,BX 命令有相同效果&#xff0c;只是Test指令不改变AX和BX的内容&#xff0c;而AND指令会把结果保…...

简单js逆向案例(2)

文章目录 前文分析完整代码结尾 前文 本文章中所有内容仅供学习交流&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01; 分析 目标网址 aHR0cHM6Ly9zZWFyY2guYmlkY2VudGV…...

azure data studio SQL扩展插件开发笔记

node.js环境下拉取脚手架 npm install -g yo generator-azuredatastudio yo azuredatastudio 改代码 运行 调试扩展&#xff0c;在visual studio code中安装插件即可 然后visual studio code打开进行修改运行即可 image.png 运行后自动打开auzre data studio了&#xff0c; 下面…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...