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

问说网 · 发布于 2014-03-10 · 字数2946 · 浏览 1529 · 评论 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和更早版本的工作。

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

相关文章

  • 2015-04-29使用PHP将数字转化为对应的汉字
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-04-02分享一些实用JavaScript常用函数方法
  • 2016-04-20PySpreadsheet基于Python为Node创建的XLSX表格插件
  • 2016-05-15iPhone6来袭!如何改进工作让设计支持多个尺寸
  • 2016-05-16快速搞定配色!掌握3个实用方法快速搞定配色
  • 2016-06-06JavaScript中使用ID获取节点的思考
  • 发布评论

    为您推荐

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

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

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

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

    Consolidate.js基于JavaScript模板引擎整合库

    Consolidate.js是一款JavaScript模板引擎整合库,支持现今流行的多种模板引擎,功能强大的模板引擎整合库,你还必须安装要使用的引擎,将它们添加…

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

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

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

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

    Bootstrap Tour基于jQuery步骤流程引导插件

    Bootstrap Tour步骤流程引导插件,可以用于对界面产品的使用介绍,基于Bootstrap的弹出窗口插件开发,使用方便响应迅速,最简单的方式告诉人们如何…

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

    FlyJSONP轻量级的跨域AJAX请求插件

    FlyJSONP是一个JavaScript库,用于实现跨域GET和POST请求服务,支持JSONP,并取得一个JSON格式的数据响应,这个Library具有易于…

    关于JavaScript中Math.random()的生成

    随机数是统计学领域的一个重要概念,对于游戏来说同样意义非凡,用好随机数,可以使你的游戏更真实、更人性、富有魅力,提高应用的用户体验。

    • 关于JavaScript中Math.random()的生成
    • 关于JavaScript中Math.random()的生成
    • 关于JavaScript中Math.random()的生成
    • 关于JavaScript中Math.random()的生成
    问说网 · 发布于 2016-03-28 · 浏览 1286 · 评论 0
    问说网 · 发布于 2016-04-02

    Webkit内核下的Mouseup后Mousemove自动触发问题及解决方法

    如题就以Chrome为代表举例说明遇到mousemove的问题,我们为body分别绑定onmousedown、onmousemove、onmouseup,并为触…

    问说网 · 发布于 2016-05-05

    Lua快速入门学习教程

    在这篇文章中,我想向大家介绍如何进行Lua 程序设计。我假设大家都学过至少一门编程语言,比如Basic 或C,特别是C。因为Lua 的最大用途是在宿主程序中作为…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13130 文章
    495 评论
    2031 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 2563

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2418

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2467

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1951

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2134

    更多 推荐作者

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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