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

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

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

HTML5学堂：水平垂直居中在项目开发中可以算是比较常见的吧，所以之前也给大家分享了HTML+CSS水平垂直居中的实现方法。今天主要给大家分享网易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="https://mmbiz.qlogo.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
<img src="https://mmbiz.qlogo.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
</div>
</div>
</body>
</html>

欢迎沟通交流~HTML5学堂

<!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="https://mmbiz.qlogo.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
<img src="https://mmbiz.qlogo.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
</div>
</div>
</body>
</html>

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

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

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

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

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