css揭秘--笔记--垂直居中

2024-09-03 06:08

本文主要是介绍css揭秘--笔记--垂直居中,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

css揭秘第40个小技巧

整篇文章所使用的的结构代码如下:

<main><h1>an i center yet </h1><p>center me !please</p>
<main>

1 基于绝对定位的解决方案

main{
position:absolete;
top:50%;
left:50%;
height:6em;
width:18em;
margin-top:-3em;
margin-left:-9em;
}

这段代码所做的事情相信有css基础的同学都了解,这里不做过多的解释。在网上就能找到这种解决方案。用calc()函数还能再优化一下

main{
position:absolete;
top:calc(50%-3em);
left:calc(50%-9em);
height:6em;
width:18em;
}

现在我们实现了垂直居中的效果,但是这种实现方式有一个很明显的缺点事宽度和高度是固定的,有时候和我们的需求冲突,所以我们需要再优化一下,要能适配不同内容。

main{
position:absolete;
top:50%;
left:50%;
height:6em;
width:18em;
transform:translate(50%,50%);
}

原理: margin的百分比是以其父元素的尺寸为基准进行解析的,
translate变形函数是以其自身的宽度和高度进行转换的。

现在我们完美的实现了垂直居中

上面这个方法有一些地方需要注意的
1. 我们有时不能使用绝对定义,因为它对整个布局的影响太强烈
2. 如果需要居中的元素在高度上超过了视口,那么他的顶部会被视口剪切掉
3. 3在某些浏览器上,这个方法可能会导致元素的显示有一些模糊,因为元素可能会放置在半个像素上面,这个问题可以用transform-style:preserve-3d来修复。

2基于视口单位的解决方案

main{
width:18em;
height:6em;
margin:50vh auto 0;
transform:translate(50%);
}

vh是css3定义的一套新的单位,称为视口相关的长度单位。有兴趣的同学可以自行上网搜索学习。
这个技巧的实用性相当有限,因为他只适用于视口相关的情况下。

3基于FlexBox的解决方案

这无疑是最好的解决办法了,因为flexbox是专门为这类需求设计的,我们只需为父元素设置display:flex;再给这个元素自身设置margin:auto;

body{
display:flex;
}
main{
margin:auto;
}

当我们适用flexbox时,margin:auto;不仅在水平方向居中,垂直方向也是一样,还有一点,我们甚至不需要制定任何的宽度,这个居中元素非配的宽度等于max-content。
有不知道max-content的同学可以看 张鑫旭写的文章,里面详细的介绍了max-content,min-content等属性

http://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/

这篇关于css揭秘--笔记--垂直居中的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1132242

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

揭秘世界上那些同时横跨两大洲的国家

我们在《世界人口过亿的一级行政区分布》盘点全球是那些人口过亿的一级行政区。 现在我们介绍五个横跨两州的国家,并整理七大洲和这些国家的KML矢量数据分析分享给大家,如果你需要这些数据,请在文末查看领取方式。 世界上横跨两大洲的国家 地球被分为七个大洲分别是亚洲、欧洲、北美洲、南美洲、非洲、大洋洲和南极洲。 七大洲示意图 其中,南极洲是无人居住的大陆,而其他六个大洲则孕育了众多国家和

三国地理揭秘:为何北伐之路如此艰难,为何诸葛亮无法攻克陇右小城?

俗话说:天时不如地利,不是随便说说,诸葛亮六出祁山,连关中陇右的几座小城都攻不下来,行军山高路险,无法携带和建造攻城器械,是最难的,所以在汉中,无论从哪一方进攻,防守方都是一夫当关,万夫莫开;再加上千里运粮,根本不需要打,司马懿只需要坚守城池拼消耗就能不战而屈人之兵。 另一边,洛阳的虎牢关,一旦突破,洛阳就无险可守,这样的进军路线,才是顺势而为的用兵之道。 读历史的时候我们常常看到某一方势

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络(1)sklearn

系列文章目录 监督学习:参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归(SAheart.csv) 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识

无线领夹麦克风什么牌子好用?揭秘领夹麦克风哪个牌子音质好!

随着短视频行业的星期,围绕着直播和视频拍摄的电子数码类产品也迎来了热销不减的高增长,其中除了数码相机外,最为重要的麦克风也得到了日益增长的高需求,尤其是无线领夹麦克风,近几年可谓是异常火爆。别看小小的一对无线麦克风,它对于视频拍摄的音质起到了极为关键的作用。 不过目前市面上的麦克风品牌种类多到让人眼花缭乱,盲目挑选的话容易踩雷,那么无线领夹麦克风什么牌子好用?今天就给大家推荐几款音质好的