学习一些常见的CSS居中方案
明年打算跳槽,所以现在开始在整理和学习面试题。
最近刚好复习到CSS,看到了关于一道居中的题目,因此就顺便将比较常用的居中方案整理一下,分享给大家。
github:github.com/ouduidui/fe…
水平居中
行内元素
如果是行内元素进行水平居中的话,只需要给其父元素设置text-align: center
即可实现。
<div class="center">HelloWorld</div>
.center {
text-align: center;
width: 100vw;
}
块级元素
如果是块级元素,给该元素设置margin: 0 auto
即可。
<div class="center"></div>
.center {
margin: 0 auto;
width: 100px;
height: 100px;
border: 1px solid #222;
}
如果你的块级元素没有设置宽度的话,可以使用display: table
来实现。
.center {
margin: 0 auto;
display: table;
}
浮动元素
如果子元素包含float浮动属性,为了让子元素居中,则可以让父元素宽度设置为fit-content
,并配合margin
。
<div class="center">
<div class="float"></div>
<div class="float"></div>
</div>
.center {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: 0 auto;
}
.float {
float: left;
width: 100px;
height: 100px;
border: 1px solid #222;
}
fit-content:取以下两种值中的较大值
- 固有的最小宽度
- 固有首选宽度(max-content)和可用宽度(available)两者中的较小值
fit-content目前不兼容IE
flex布局
我们可以使用flex弹性布局,轻松实现水平居中,不管子元素是行内元素还是块级元素,只需要在父元素设置display: flex; justify-content: center;
即可。
<div class="center">
<div>HelloWorld</div>
</div>
<div class="center">
<span>HelloWorld</span>
</div>
<div class="center">HelloWorld</div>
.center {
display: flex;
justify-content: center;
}
绝对定位
我们可以对元素进行绝对定位进行水平居中布局。同时我们可以分别配合transform
、margin-left
。
transform
<div class="center">HelloWorld</div>
.center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
margin-left
该方案适用于已知容器宽度,然后通过margin-left
向左移动一半宽度实现。
<div class="center"></div>
:root {
--box-width: 100px;
}
.center {
position: absolute;
left: 50%;
margin-left: calc(-1 * var(--box-width) / 2);
width: var(--box-width);
height: 60px;
border: 1px solid #222;
}
垂直居中
单行文本
如果元素是单行文本,我们只需要设置line-height
为父元素高度即可。
<div class="page">
<span class="center">HelloWorld</span>
</div>
.page {
height: 300px;
border: 1px solid #222;
}
.center {
line-height: 300px;
}
行内块级元素
如果元素是行内块级元素, 基本思想是使用display: inline-block
, vertical-align: middle
和一个伪元素让内容块处于容器*。
<div class="page">
<span class="center"></span>
</div>
.page {
height: 300px;
border: 1px solid #222;
}
.center {
display: inline-block;
vertical-align: middle;
width: 80px;
height: 20px;
background: #D66852;
}
.page::after, .center {
display: inline-block;
vertical-align: middle;
}
.page::after {
content: '';
height: 100%;
}
flex布局
我们可以使用flex弹性布局,轻松实现水平居中,不管子元素是行内元素还是块级元素,只需要在父元素设置display: flex; align-items: center;
即可。
<div class="center">
<div>HelloWorld</div>
</div>
.center {
display: flex;
align-items: center;
height: 300px;
border: 1px solid #222;
}
绝对定位
我们可以对元素进行绝对定位进行水平居中布局。同时我们可以分别配合transform
、margin-top
。
transform
<div class="center">HelloWorld</div>
.center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
margin-top
该方案适用于已知容器高度,然后通过margin-top
向上移动一半高度实现。
<div class="center"></div>
:root {
--box-height: 60px;
}
.center {
position: absolute;
top: 50%;
margin-top: calc(-1 * var(--box-height) / 2);
height: var(--box-height);
width: 100px;
border: 1px solid #222;
}
上一篇: 常用的几种方法:如何使用CSS让div元素居中显示
下一篇: 水平居中布局:掌握CSS布局中的方法
推荐阅读
-
单片机学习路径中的一些常见疑问也是我的个人学习总结 - 输入模式
-
纯干货分享 | 研发效能提升——敏捷需求篇-而敏捷需求是提升效能的方式中不可或缺的模块之一。 云智慧的敏捷教练——Iris Xu近期在公司做了一场分享,主题为「敏捷需求挖掘和组织方法,交付更高业务价值的产品」。Iris具有丰富的团队敏捷转型实施经验,完成了企业多个团队从传统模式到敏捷转型的落地和实施,积淀了很多的经验。 这次分享主要包含以下2个部分: 第一部分是用户影响地图 第二部分是事件驱动的业务分析Event driven business analysis(以下简称EDBA) 用户影响地图,是一种从业务目标到产品需求映射的需求挖掘和组织的方法。 在软件开发过程中可能会遇到一些问题,比如大家使用不同的业务语言、技术语言,造成角色间的沟通阻碍,还会导致一些问题,比如需求误解、需求传递错误等;这会直接导致产品的功能需求和要实现的业务目标不是映射关系。 但在交付期间,研发人员必须要将这些需求实现交付,他们实则并不清楚这些功能需求产生的原因是什么、要解决客户的哪些痛点。研发人员往往只是拿到了解决方案,需要把它实现,但没有和业务侧一起去思考解决方案是否正确,能否真正的帮助客户解决问题。而用户影响地图通常是能够连接业务目标和产品功能的一种手段。 我们在每次迭代里加入的假设,也就是功能需求。首先把它先实现,再逐步去验证我们每一个小目标是否已经实现,再看下一个目标要是什么。那影响地图就是在这个过程中帮我们不断地去梳理目标和功能之间的关系。 我们在软件开发中可能存在的一些问题 针对这些问题,我们如何避免?先简单介绍做敏捷转型的常规思路: 先做团队级的敏捷,首先把产品、开发、测试人员,还有一些更后端的人员比如交互运维的同学放在一起,组成一个特训团队做交付。这个团队要包含交付过程中所涉及的所有角色。 接着业务敏捷要打通整个业务环节和研发侧的一个交付。上图中可以看到在敏捷中需求是分层管理的,第一层是业务需求,在这个层级是以用户目标和业务目标作为输入进行规划,同时需要去考虑客户的诉求。业务人员通过获取到的业务需求,进一步的和团队一起将其分解为产品需求。所以业务需求其实是我们真正去发布和运营的单元,它可以被独立发布到我们的生产环境上。我们的产品需求其实就是产品的具体功能,它是我们集成和测试的对象,也就是我们最终去部署到系统上的一个基本单元。产品需求再到了我们的开发团队,映射到迭代计划会上要把它分解为相应的技术任务,包括我们平时所说的比如一些前端的开发、后端的开发、测试都是相应的技术任务。所以业务敏捷要达到的目标是需要去持续顺畅高质量的交付业务价值。 将这几个点串起来,形成金字塔结构。最上层我们会把业务目标放在整个金字塔的塔尖。这个业务目标是通过用户的目标以及北极星指标确立的。确认业务目标后再去梳理相应的业务流程,最后生产。另外产品需求包含了操作流程和业务规则,具需求交付时间、工程时间以及我们的一些质量标准的要求。 谈到用户影响的地图,在敏捷江湖上其实有一个传说,大家都有一个说法叫做敏捷需求的“任督二脉”。用户影响地图其实就是任脉,在黑客马拉松上用过的用户故事地图其实叫督脉。所以说用户影响地图是在用户故事地图之前,先帮我们去梳理出我们要做哪些东西。当我们真正识别出我们要实现的业务活动之后,用户故事地图才去梳理我们整个的业务工作流,以及每个工作流节点下所要包含的具体功能和用户故事。所以说用户影响地图需要解决的问题,我们包括以下这些: 首先是范围蔓延,我们在整张地图上,功能和对应的业务目标是要去有一个映射的。这就避免了一些在我们比如有很多干系人参与的会议上,那大家都有不同想法些立场,会提出很多需求(正确以及错误的需求)。这个时候我们会依据目标去看这些需求是否真的是会影响我们的目标。 这里提到的错误需求,比如是利益相关的人提出的、客户认为产品应该有的、某个产品经理需求分析师认为可以有的....但是这些功能在用户影响地图中匹配不到对应目标的话,就需要降低优先级或弃掉。另外,通常我们去制定解决方案的时候,会考虑较完美的实现,导致解决方案括很多的功能。这个时候关键目标至关重要,会帮助我们梳理筛选、确定优先级。 看一下用户影响到地图概貌 总共分为一个三层的结构: 第一层why,你的业务目标哪个是最重要的,为什么?涉及到的角色有哪些? 第二层how ,怎样产生影响?影响用户角色什么样的行为? (不需要去列出所有的影响,基于业务目标) 第三层what,最关键的是在梳理需求时不需一次把所有细节想全,这通常团队中经常遇到的问题。 我们用这个例子来看一下 这是一个客服中心的影响地图,业务目标是 3个月内不增加客服人数的前提下能支持1.5倍的用户数。此业务目标设定是符合 smart 原则的,specific非常的具体,miserable 是可以衡量的,action reoriented是面向活动的, real list 也是很实际的。 量化的目标会指引我们接下来的行动,梳理一个业务目标,尽量去量化,比如 :我们通过打造一条什么样的流水线,能够提高整个部署的效率,时间是原来的 1/2 。这样才是一个能量化的有意义的目标。 回到这幅图, how 层级识别出来的内容,客服角色:想要对它施加的影响,把客户引导到论坛上,帮助客户更容易的跟踪问题,更快速的去定位问题。初级用户:方论坛上找到问题。高级用户:在论坛上回答问题。通过我们这些用户角色,进行活动,完成在不增加客户客服人数的前提下支持更多的用户数量。 最后一个层级,才是我们日常接触比较多的真正的功能的特性和需求,比如引导到客户到论坛上,其实这个产品就需要有一个常见问题的论坛的链接。这个层次需要我们团队进一步地在交付,在每个迭代之前做进一步的梳理,细化成相应的用户故事。 这个是云智慧团队中,自己做的影响地图的范例,可以看下整个的层级结构。序号表示优先级。 那我们用户影响地图可以总结为:
-
[姿势估计] 实践记录:使用 Dlib 和 mediapipe 进行人脸姿势估计 - 本文重点介绍方法 2):方法 1:基于深度学习的方法:。 基于深度学习的方法:基于深度学习的方法利用深度学习模型,如卷积神经网络(CNN)或递归神经网络(RNN),直接从人脸图像中学习姿势估计。这些方法能够学习更复杂的特征表征,并在大规模数据集上取得优异的性能。方法二:基于二维校准信息估计三维姿态信息(计算机视觉 PnP 问题)。 特征点定位:人脸姿态估计的第一步是通过特征点定位来检测和定位人脸的关键点,如眼睛、鼻子和嘴巴。这些关键点提供了人脸的局部结构信息,可用于后续的姿势估计。 旋转表示:常见的旋转表示方法包括欧拉角和旋转矩阵。欧拉角通过三个旋转角度(通常是俯仰、偏航和滚动)描述头部的旋转姿态。旋转矩阵是一个 3x3 矩阵,表示头部从一个坐标系到另一个坐标系的变换。 三维模型重建:根据特征点的定位结果,三维人脸模型可用于姿势估计。通过将人脸的二维图像映射到三维模型上,可以估算出人脸的旋转和平移信息。这就需要建立人脸的三维模型,然后通过优化方法将模型与特征点对齐,从而获得姿势估计结果。 特征点定位 特征点定位是用于检测人脸关键部位的五官基础部分,还有其他更多的特征点表示方法,大家可以参考我上一篇文章中介绍的特征点检测方案实践:人脸校正二次定位操作来解决人脸校正的问题,客户在检测关键点的代码上略有修改,坐标转换部分客户见上图 def get_face_info(image). img_copy = image.copy image.flags.writeable = False image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB) results = face_detection.process(image) # 在图像上绘制人脸检测注释。 image.flags.writeable = True image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR) box_info, facial = None, None if results.detections: for detection in results. for detection in results.detections: mp_drawing.Drawing.detection = 无 mp_drawing.draw_detection(image, detection) 面部 = detection.location_data.relative_keypoints 返回面部 在上述代码中,返回的数据是五官(6 个关键点的坐标),这是用 mediapipe 库实现的,下面我们可以尝试用另一个库:dlib 来实现。 使用 dlib 使用 Dlib 库在 Python 中实现人脸关键点检测的步骤如下: 确保已安装 Dlib 库,可使用以下命令: pip install dlib 导入必要的库: 加载 Dlib 的人脸检测器和关键点检测器模型: 读取图像并将其灰度化: 使用人脸检测器检测图像中的人脸: 对检测到的人脸进行遍历,并使用关键点检测器检测人脸关键点: 显示绘制了关键点的图像: 以下代码将参数 landmarks_part 添加到要返回的关键点坐标中。
-
你有遇到深度学习的这些困难吗?神经网络常见的11个陷阱以及解决方案
-
学习一些常见的CSS居中方案
-
【详解CSS三种常用方法实现水平居中】 收录CSS水平居中的全方位解决方案
-
面试常见问题:7种实现元素水平垂直居中的CSS方法
-
3种常见方法:使用CSS实现盒子的水平和垂直居中
-
常见的水平垂直居中方法:CSS Flex布局
-
了解如何使用一些常见的CSS选择器:+、~、>,以及:first-child和:nth-child