纯CSS代码实现垂直方向居中Vertical Centering

问说网 · 发布于 2014-03-10 · 字数2946 · 浏览 1517 · 评论 0

前端发展是美丽的,它变得一天天漂亮。 现在我们得到了这么多的概念,方法,良好做法和诸如此类的东西,使我们的工作从休息站出来。 使用Javascript(连同其无数的第三方库)和CSS都长得那么大,帮助我们创造,即使是几年前被认为不可能的事情。 但有一个通常留在黑暗中的一件事,我敢肯定你已经至少有一次无意中发现它,并知道它的定位并不总是很好找:垂直居中元素。

现在,有解决这个问题的方法很多:是使用table标的的方法,高和半高的方法,插入,另一件的斜线伪元素与垂直对齐和高度 – 100%法,计算负载的方法,等等。 所有这些似乎比过去更脏,它会变得更加复杂,当元素的高度是未知的(无论是父级元素还是子元素),不要让我开始对如何坏它的外观与响应布局工作时一样。

对于一个好的时间,我去的“计算负荷”的方法。 前提很简单:得到父母的身高,2减去儿童的身高,分化,其结果作为像素值内联Top属性。 本质上,50%的父级元素的高度 – 子元素的高度的50%,完成。 下面是它的可视化表示:

红色的"210px",是我们需要在"top"属性设置的值。

红色的”210px”,是我们需要在”top”属性设置的值。

我知道你在想什么,“内联CSS是坏的!”,但是这是最丑陋的解决方案。 它并不需要改变任何元素的盒模型,浪费其伪元素,插入其他元素只是为了一个修复的,也没有任何其他的两轮牛车。 但正如我之前所说,事情当元素的尺寸为未知的麻烦。

当然,你可以渡过这个通过使用运行后窗口已经加载,或者在窗口/对象调整大小,然后重新计算位置的脚本。 但是,如果你已经有了几百个元素,每个元素得到调整大小以适合他们的父母帧? 该脚本将一个巨大的性能损失。 更重要的是,为什么复杂的事情这么多,当有一个简单的,纯粹的CSS的解决方案?

the HTML

我们的例子将底座上下面的HTML:

<div>
  <div>I'm vertically centered!</div>
</div>

这是一个常见的​​情况:有孩子的父母,我们渴望被垂直居中。

进入CSS3的变换

关于CSS变换一个有趣的事情是,随着百分比值在应用它们时,他们的基地上,他们正在实施的,而不是像上面的属性,右,下,左,利润率和填充元素的维度值,只使用父级的尺寸(或如属绝对定位,它使用它的近亲父母)。

知道了这一点,我们可以采用同样的“计算负荷”的方法的小公式,但现在适应它只是CSS。 50%,那么我们拉回来了一半说的元素,与变换:translateY的(-50%)首先,我们利用母公司顶部移动有问题的元件来降低它的中间。 当然,元素必须是相对的,绝对的,或固定。 如果我们回顾一下图1,这正是我们已经实现。

.children{
    background: #ffdb4c;
    height: 300px;
    position: relative;
    top: 50%;
    transform:             translateY(-50%);
}

由于我们使用的是百分比,这些元素将被垂直居中不管他们的父母有多高,或者他们尝试什么未知的随机变化,而用户与它们进行交互。

最后,一​​些警告:如果你想centralice一个相对定位的元素,其母公司必须有一个高度值,也就是说,它不会,如果说父母的高度设置为自动运行。 当然,由于大部分CSS3特性和属性,变换不要在IE 8和更早版本的工作。

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2016-07-15十分钟搞清字符集和字符编码
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-05-17不看后悔!设计师应该具备的品牌意识
  • 2016-05-28详解HTML5中的声频Audio和视频Video使用
  • 2016-07-07Fool.js恶搞整人网页特效jQuery插件
  • 2016-07-12分享10个在使用Photoshop过程中的小技巧
  • 2016-07-15MySQL运维开发工具汇总
  • 发布评论

    为您推荐

    问说网 · 发布于 2015-03-12

    使用纯JavaScript脚本制作隐藏滑动菜单

    固定的菜单,将滑出页面的两侧,在右侧和左侧的随意移动body。一套固定的菜单,可以从任何一页的边缘滑出。这两个菜单,幻灯片从左边和右边也可以用在身体的左侧或右侧…

    十分钟搞清字符集和字符编码
    问说网 · 发布于 2016-07-15

    十分钟搞清字符集和字符编码

    在介绍字符集之前,我们先了解下为什么要有字符集。我们在计算机屏幕上看到的是实体化的文字,而在计算机存储介质中存放的实际是二进制的比特流。

    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    问说网 · 发布于 2016-02-18

    PostgreSQL安装和使用新手入门

    自从MySQL被Oracle收购以后,PostgreSQL逐渐成为开源关系型数据库的首选。本文介绍PostgreSQL的安装和基本用法,供初次使用者上手。以下内…

    问说网 · 发布于 2016-03-30

    JavaScript中Apply和Call的含义与区别

    JavaScript中,apply()与call()的含义一样,均为改变调用函数中的this指向,其中apply()与call()的第一个参数表示所要指向的对象…

    在Photoshop中设计绚丽的几何形状字体

    在这个教程中,我会向你展示整个设计过程,如何在ps中创建这个绚丽错落的几何字体,这是一个简单的教程,但效果看起来真棒,试试看!在此过程中,我会教给你一些技巧,创…

    • 在Photoshop中设计绚丽的几何形状字体
    • 在Photoshop中设计绚丽的几何形状字体
    • 在Photoshop中设计绚丽的几何形状字体
    • 在Photoshop中设计绚丽的几何形状字体
    问说网 · 发布于 2016-04-23 · 浏览 1104 · 评论 0
    问说网 · 发布于 2016-12-02

    Response JS创建高性能的支持移动设备的网站

    Response JS 是一个轻量级的 jQuery 插件,用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的设备环境动态替换HTML代码。例如…

    Nike+ Move 日常运动量统计APP

    Nike+ Move是一款帮助用户统计日常运动量的应用,比起同类软件长期占用CPU来说,利用了M7处理器的运动检测软件更是如虎添翼,帮助用户更好的检测睡眠、跑步…

    • Nike+ Move 日常运动量统计APP
    • Nike+ Move 日常运动量统计APP
    • Nike+ Move 日常运动量统计APP
    • Nike+ Move 日常运动量统计APP
    MaxwellDaphne · 发布于 2016-05-14 · 浏览 1219 · 评论 0

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13130 文章
    494 评论
    2011 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 2377

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2251

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2298

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1784

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1941

    更多 推荐作者

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!