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

问说网 · 发布于 2014-03-10 · 字数2946 · 浏览 1561 · 评论 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-05-20如何选择适合你的网站设计合适的界面模式
  • 2015-08-22Picturefill可选参数和JavaScript API介绍
  • 2015-09-116个强大的AngularJS扩展应用[转]
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-03-25C语言的设计模式之单一职责
  • 2016-04-03JavaScript面向对象继承基础讲解
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 发布评论

    为您推荐

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

    Socialite.js生成各种社交网站分享按钮的JavaScript库

    Socialite.js 是一个用来方便生成各种社交网站分享按钮的 Javascript 库,压缩后只有 2k 大小。提供多种按钮排列样式。Socialite.…

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

    Miso Dataset大数据可视化工具集合

    Miso Dataset是一个JavaScript客户端的数据转换和管理库。Miso Dataset通过处理加载、解析、排序、查询和处理来自各种来源的数据来管理…

    用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-12-02

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

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

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

    移动端页面布局及字体大小该如何设置

    之前发过一篇文章 《移动端应该如何动态设置字体大小?》 ,主要说了移动web端布局的一些解决方法,本文再一次把这个问题提出来,并分别对安卓和IOS设备的屏幕了解…

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

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

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

    梦幻IOS8 APP应用程序用户界面设计
    思念像咒语 · 发布于 2016-05-15

    梦幻IOS8 APP应用程序用户界面设计

    这是一套梦幻的iOS8风格 APP UI界面设计,这套APP是由behance平台优秀的设计师完成,,特别棒的设计,并且非常人性化的设计,今天特意分享给大家,希…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13138 文章
    495 评论
    2060 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3038

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2813

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2925

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2346

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2546

    更多 推荐作者

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    关注 失戀德標簽

    文章 92 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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