问说网全新改版上线,邀您一起讨论

问说网 · 发表于 2014-03-10

文章13116 · 评论469

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

字数2946 · 浏览 1435 · 评论 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和更早版本的工作。

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接
北欧牧风羽绒被

更多 热门话题

APP界面

APP界面

文章 41517

APP欣赏

APP欣赏

文章 41450

APP手机界面

APP手机界面

文章 41440

图片素材

图片素材

文章 29463

高清图片

高清图片

文章 26225

更多 推荐作者

问说网

文章 13116

GallupDarnell

文章 117

GibbonRoy

文章 115

StuartKelly

文章 114

YeatesGeoffrey

文章 113

发布评论

顶部 反馈 评论 底部

意见反馈

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

您的反馈我们已收到!

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