网易NEC水平垂直居中

HTML5学堂:水平垂直居中在项目开发中可以算是比较常见的吧,所以之前也给大家分享了HTML+CSS水平垂直居中的实现方法。今天主要给大家分享网易NEC里面是如何实现水平垂直居中。

网易NEC是什么?

NEC是网易(杭州)前端CSS开源项目代号,它为您提供漂亮简单的样式解决方案,包括了规范、框架、代码库、插件等内容,致力于为前端开发人员提供高效率高质量的前端页面开发解决方案,提高多人协作效率,也为非专业人员提供快速制作网页的解决方案。

搭建基本的结构

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - HTML5学堂</title>
<link rel="stylesheet" href="reset.css">
</head>
<body>
<div class="wrap">
<div>
<img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
<img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
</div>  
</div>
</body>
</html>

实现基本样式

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - HTML5学堂</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
html,body{
width: 100%;
height: 100%;
}
.wrap{
position:relative;
width: 100%;
height: 100%;
}
.wrap > div {
/*父级设置定位*/
position:absolute;
left:50%;
top:50%;
}
.wrap img {
/*设置图片大小*/
display: block;
width: 200px;
height: 200px;
}
.wrap img:nth-child(1) {
/*第一张图片隐藏*/
visibility:hidden;
}
.wrap img:nth-child(2) {
/*第二张图片定位*/
position:absolute;
left: -50%;
top: -50%;
}
</style>
</head>
<body>
<div class="wrap">
<div>
<img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
<img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
</div>  
</div>
</body>
</html>

效果分析

它的父级div设置left、top各自为50%,这一步相信大家还是可以理解,就不详细做介绍了。

那么为什么要用两张图片?

大家仔细看看,该方法是没有给父级设置宽高,是靠图片来撑开,所以有一张图片是撑开父级的宽高。

另外一张图片设置left、top为50%,意思就是相对它的父级定位,left、top都是父级宽高的一半(父级的宽高等于图片的宽高)

效果原理分析

这种方法的优势

优点是可以不知道图片的大小,随便放张尺寸上去都能做到居中。另外,兼容性好,如果是不使用nth-child选择器的话,IE6都能兼容的

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

CSS中height:100%和height:inherit的异同

2. 大多数情况作用是一样的 除去兼容性,大多数情况下,两者作用是一样的,甚至都很难想出不一样的理由。

901
来自专栏快乐八哥

使用CSS制作文字环绕图片效果(文字内容包含<li>标签)

1.一般制作文字环绕图片效果。 HTML结构: View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1....

3169
来自专栏技术专栏

微信小程序- 移动设备的分辨率与rpx

2271
来自专栏Crossin的编程教室

【Pygame 第4课】 获取鼠标位置

最近微信上很火的“打飞机”游戏,通过手指在屏幕上触摸的位置来移动你的飞机。在电脑上,我们没法直接用手操作,但可以用鼠标替代手指。 在电脑游戏里,鼠标是个很好用的...

49512
来自专栏腾讯大讲堂的专栏

如何做一个让人闻风丧胆的H5

前言 最近火热的有声娱乐平台 APP,企鹅 FM,在8月28日鬼节前夕,联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师,在这个移动互联网叱咤...

2116
来自专栏大数据钻研

前端面试经典问题:CSS中居中的几种方式

作为面试常客,学会这些,面试多点把握,同学间逼格升高 周五,老大说他面试了一个问题,是css居中的问题,然后我们在这边就讨论了一番,周末嗨玩,尾巴上想起这件事,...

4976
来自专栏HTML5学堂

JS 吸顶导航,告别“回到顶部”

当我们浏览页面篇幅较大,浏览过半的时候想回到导航位置,只能通过往回滚动或通过”回到顶部”重新滚动到导航位置,这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互...

6986
来自专栏数据小魔方

论一个图表的自我修养

昨天给大家讲解了商务图表制作中的黄金原则——最大化数据墨水比。 今天继续给大家解构图表的元素布局! 商务图表作为表达业务数据的重要方式,需要遵循基本的元素布局...

35811
来自专栏十月梦想

移动端适配之比例缩放适配

前面一篇简单介绍了适配的方案(百分比适配),对于百分比的适配也是挺多问题,这次介绍一下viewport适配方案!

1833
来自专栏河湾欢儿的专栏

响应式布局流式布局

响应式布局:根据不同的尺寸适配 viewport width=device-width 设置视口的宽度等于设备的宽度,如果不设置的话,默认视口的宽度是980...

1152

扫码关注云+社区

领取腾讯云代金券