前端技术分享-码匠 极客编程技术分享

您当前位于:HTML+CSS ——> CSS实现水平垂直居中 - 看看网易大公司如何实现

CSS实现水平垂直居中 - 看看网易大公司如何实现

2015/07/27 20:54:24 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS | 关键词:CSS,水平垂直,居中,高端实现

CSS实现元素水平垂直居中-网易NEC方法

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

网易NEC是什么?

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

搭建基本的结构

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - HTML5学堂</title>
  6.  <link rel="stylesheet" href="reset.css">
  7. </head>
  8. <body>
  9. <div class="wrap">
  10.   <div>
  11.     <img src="https://mmbiz.qlogo.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
  12.     <img src="https://mmbiz.qlogo.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
  13.   </div>  
  14. </div>
  15. </body>
  16. </html>

欢迎沟通交流~HTML5学堂

实现基本样式

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - HTML5学堂</title>
  6.  <link rel="stylesheet" href="reset.css">
  7.  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  8.  <style>
  9.   html,body{
  10.     width: 100%;
  11.     height: 100%;
  12.   }
  13.   .wrap{
  14.    position:relative;
  15.    width: 100%;
  16.    height: 100%;
  17.   }
  18.   .wrap > div {
  19.    /*父级设置定位*/
  20.    position:absolute;
  21.    left:50%;
  22.    top:50%;
  23.   }
  24.   .wrap img {
  25.    /*设置图片大小*/
  26.    display: block;
  27.    width: 200px;
  28.    height: 200px;
  29.   }
  30.   .wrap img:nth-child(1) {
  31.    /*第一张图片隐藏*/
  32.    visibility:hidden; 
  33.   }
  34.   .wrap img:nth-child(2) {
  35.    /*第二张图片定位*/
  36.    position:absolute;
  37.    left: -50%;
  38.    top: -50%; 
  39.   }
  40.  </style>
  41. </head>
  42. <body>
  43. <div class="wrap">
  44.   <div>
  45.     <img src="https://mmbiz.qlogo.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
  46.     <img src="https://mmbiz.qlogo.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
  47.   </div>  
  48. </div>
  49. </body>
  50. </html>

效果分析

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

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

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

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

效果原理分析
网易NEC水平垂直居中 效果原理分析

这种方法的优势

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

相关文章推荐

CSS实现元素水平垂直居中

CSS实现元素水平垂直居中 - 其他方法

CSS实现元素水平垂直居中 - CSS3 calc方法

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端