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

问说网 · 发布于 2014-03-10 · 字数2946 · 浏览 1510 · 评论 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-01-09分享Web开发中实用简单的片段代码
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-05-17不看后悔!设计师应该具备的品牌意识
  • 2016-05-17AI教程!绘制色彩丰富的卡通猫头鹰(附源文件)
  • 2016-06-11jQuery Collapse轻量级的手风琴菜单插件
  • 2016-06-24分享常用响应式Web UI开发框架
  • 2016-07-06Java初识
  • 2016-07-06Java异常处理
  • 发布评论

    为您推荐

    分享6款基于CSS和SVG的Loader加载动画特效

    如果你想给网站添加一些加载动画,如果使用Gif总觉得不太方便,无法自定义颜色和效果,不过如果使用CSS和SVG,那么我们就可以自定义任何我们想要的效果,接下来分…

    • 分享6款基于CSS和SVG的Loader加载动画特效
    • 分享6款基于CSS和SVG的Loader加载动画特效
    • 分享6款基于CSS和SVG的Loader加载动画特效
    • 分享6款基于CSS和SVG的Loader加载动画特效
    问说网 · 发布于 2015-10-09 · 浏览 1809 · 评论 0
    问说网 · 发布于 2015-12-12

    FileDrop拖拽式文件上传界面JavaScript框架

    FileDrop 是一个 JavaScript 类,可以用来快速创建拖拽式的文件上传界面。它不依赖任何 JavaScript 框架,并且可以在多个浏览器中运行,…

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

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

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

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

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

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

    PeggyVeromca · 发布于 2016-05-16

    实用好文!iOS和安卓设计规范的10个不同点?

    读了安卓和iOS的设计规范再看app,有一种指出“这是巴洛克风格的建筑设计”的乐趣。iOS设计规范围绕一个核心,就是“模态”安卓设计规范如果总结成一句话,就是“…

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

    PHP处理Checkbox多选框表单元素

    最近做Form表单提交的时候,复选框Checkbox提交的数据不知道怎么处理,Checkbox允许多个选项,我们不可能每个选项都自定义Name属性,然后后台一一…

    为你的博客添加注册Google广告支持

    首先,通过 google adsense 注册链接进行注册。注册过程比较简单,通过鼠标点击和一些个人信息输入就可以完成。具体几个关键步骤可以看下面的截图。

    • 为你的博客添加注册Google广告支持
    • 为你的博客添加注册Google广告支持
    • 为你的博客添加注册Google广告支持
    • 为你的博客添加注册Google广告支持
    问说网 · 发布于 2016-07-15 · 浏览 1035 · 评论 0
    问说网 · 发布于 2016-07-15

    Python中给多维数组赋值之前判断Key是否存在的方法

    Python中可以使用dict数据类型来实现二维及多维数组。但是在对dict类型的多维数组赋值时,相较其他语言需要预先额外判断一次低维度的key是否存在的操作。

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13128 文章
    493 评论
    1931 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1809

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1743

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1750

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1249

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1447

    更多 推荐作者

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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