当前位置:首页 > 日记 > 正文

垂直中心实现方法

垂直中心实现方法
本文介绍了用CSS实现垂直居中的5种方法,虽然各有优缺点,但也很实用。合作伙伴根据自己的项目自由选择。
摘要:
当我们做页面时,我们经常满足垂直居中的需要。今天我们有5种垂直对齐方式。每种方法都有自己的优缺点,可以选择自己喜欢的方式。下面的代码是我亲自测试过的。

线高度:
复制代码代码如下所示:

{。内容
身高:240px;
行高:240px;
}
垂直对齐:中间;
之前:
复制代码代码如下所示:

{。内容
身高:240px;
}
{子:之前
内容;
显示块;
身高:120px;
}
垂直对齐:中间;
垫上:
复制代码代码如下所示:

{。内容
身高:240px;
}
{。孩子
120px垫上;
}
垂直对齐:中间;

位置:绝对:
复制代码代码如下所示:

{。内容
位置:绝对;
身高:240px;
}
{。孩子
职位:相对;
顶部:50%;
}
垂直对齐:中间;

显示:表单元格;
复制代码代码如下所示:

{ #内容
显示:表;
}
{ #孩子
显示:表单元格;
垂直对齐:中间;
身高:300px;
}
垂直对齐:中间;

总结:
以上我做的代码在Chrome测试下,IE可能有一些问题,请注意使用。

相关文章

办公室WPS使用一个小技巧WPS文本教

办公室WPS使用一个小技巧WPS文本教

教程,文本,小技巧,办公室,电脑软件,办公室WPS使用小技巧 由于计算机性能瓶颈,使用办公资源总是很高,于是放弃办公,转向WPS的怀抱,似乎很好。 嗯,希腊教育是一个新的联盟,作者用WPS作为我写的故事没有什么麻烦,向我提出这个问题。 在输入面积和体积…

ps使用矢量过滤插件进行马赛克细分

ps使用矢量过滤插件进行马赛克细分

插件,细分,过滤,矢量,电脑软件,类似于以前的插件,这也是一个矢量滤波器。根据自动改变细节的层次和精度镶嵌人为设定的目标,以创建一张图片的松弛程度的主动控制,这是所有的图片都不能给。 类似于以前的插件,这也是一个矢量滤波器。根据自动改…

PHP实现的简单扫雷游戏的一个例子

PHP实现的简单扫雷游戏的一个例子

例子,简单,游戏,电脑软件,PHP,本文介绍了一个简单的扫雷游戏,由php实现,供大家分享,供大家参考: _post {初始化=美元美元init}; / /游戏重启 点击_post美元美元= {点击}; / /扫雷 checkflag美元= 0; / /胜利或失败 click_count美元= 0; / /点击数 …

520甜蜜快乐QQ个性签名快乐个性签

520甜蜜快乐QQ个性签名快乐个性签

个性签名,快乐,甜蜜,电脑软件,QQ,520 5月20日,我爱你浪漫的日子。相对于她,他在你心中表现你的感情吗我希望你有喜欢的人物签名,欢迎阅读。 1。我可以和你们在一起,你们所有人。 2。我不想让你独自一个人等待,我无法忍受你一个人。 三.没有你,我…

非主流女孩的情感签名非主流

非主流女孩的情感签名非主流

非主流,女孩,情感,电脑软件,个人签名能显示你的个性。有些人会在个人签名写自己的感受,和个人签名可以写你的个人feelings.qq个性签名是展示其个性、喜悦、愤怒、悲伤和快乐,所以叫个性签名。每个人每天、每一小时、每一分钟、每一秒都有不同…

ps层是如何操作的创建/复制/删除图

ps层是如何操作的创建/复制/删除图

操作,教程,删除图层,样式,电脑软件,ps层是如何操作的ps中的图层样式可以对每个图层做各种特效,然后如何在ps中创建图层样式呢下面的课程是共享的,用于创建/复制/删除图层样式,您需要的朋友可以参考它。 ps中的图层样式可以对每个图层做各种特…

QQ空间日志按日期分类功能介绍常见

QQ空间日志按日期分类功能介绍常见

分类,日志,空间,按日,常见,QQ空间日志增加了。根据分类的日期,在日志列表的右栏中,单击日志列表中日历的月份,您可以看到该月的日志: 日历介绍: 1。日历显示年份和月份; 2,黑色月份(图标)有日志内容,将鼠标移到月份停留几秒钟,它将显示这个月有好几…

ps合成海战场景酷女海盗教程

ps合成海战场景酷女海盗教程

教程,海战,场景,女海盗,电脑软件,这个教程很漂亮,很有创意,我们学习了一些。 这种合成方法很好,构思:首先要对图片和草图进行构思;通过搜集素材素描;合成时先从背景开始,慢慢添加细节元素和人物;最后,光线、色彩渲染、处理细节等可以添加文字。最后…

共享Javascript的常用方法

共享Javascript的常用方法

常用方法,电脑软件,Javascript,对于当前的开发,我们将编写一些重复的JS处理代码,今天我们总结了几种常用的方法,获取GET请求参数并转到字符串空间。 1,获取GET请求中的参数 JS代码 功能getpara(参数){ 如果(location.href.indexof()= = 1){ 没有参…

CSS动画和转换工作原理的深入探讨

CSS动画和转换工作原理的深入探讨

动画,工作原理,转换,电脑软件,CSS,本文主要介绍了CSS动画和转换的工作原理,包括GPU的硬件和相关特性等。 在这篇文章中,我们将探讨如何浏览器处理CSS动画和css,这样你可以写一些动画效果之前有一个动画的运行在浏览器中的心理预期。这些偏见,你…

excel如何使用特殊符号来补充excel

excel如何使用特殊符号来补充excel

数字,特殊符号,基数,如何使用,电脑软件,除了重复输入,REPT另一个衍生的功能是创建一个包含纯文本直接在工作表中的直方图。它的原理很简单,就是利用特殊符号的智能重复,按照指定单元格计算结果表现出长短不一的影响。 例如,我们首先制定年度资…

AI过滤器是如何产生结果的

AI过滤器是如何产生结果的

过滤器,电脑软件,AI,AI过滤器是如何产生结果的AI显然是两条交叉路径。为什么我们不能应用一系列的操作,如切割和合并,并提示过滤器不能产生结果。请选择两条交叉路径请看下面的细节。 AI显然是两条交叉路径。为什么我们不能应用一系列的操作,…