JS实现图片垂直居中显示小结


Posted in Javascript onDecember 13, 2016

第1种,居中效果

<div class="box">
<div class="center">居中效果</div>
</div>
/*第1种,垂直居中效果*/
.box{
    width: 200px;height: 200px;border: 1px solid #ccc;
    position: relative;
 }
.center{
   width: 100px;height: 100px;background: gray;
   margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;
  }

第2种 图片居中

<div class="box2">
<img class="center2" src="yz_p5.jpeg" alt=""/>
<span class="block"></span>
</div>
/*第2种 图片垂直居中*/
/* span是辅助元素 vertical-align这个属性的特点,它是相对兄弟级行高(line-height)来定位*/

.box2{
  width: 350px;height: 350px;border: 1px solid #F22727;
  text-align: center;
}
.center2{ vertical-align: middle;}
.block{ line-height: 350px;}/*跟父级一样高*/

第3种,居中效果 父元素使用display: table; 子元素display: table-cell;

<div class="box3">
<span class="center3"><img src="yz_p5.jpeg" alt=""/></span>
</div>
/*第3种,居中效果*/
.box3{
  width: 350px;height: 350px;border: 1px solid #F22727;display: table;text-align: center;
}
.center3{
  display: table-cell;vertical-align: middle;
}

 第4种,居中效果

<div class="box4">
<img class="center4" src="yz_p5.jpeg" alt=""/>
</div>
/*第4种,居中效果 根据父元素来计算*/
.box4{
  width:300px;height: 300px;border: 1px solid #F22727;
}
.center4{
  width: 200px;height: 200px;position: relative;left: 16%;top: 19%;
}

以上所述是小编给大家介绍的JS实现图片垂直居中显示小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
Javascript this 函数深入详解
Dec 13 #Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 #Javascript
简单实现js浮动框
Dec 13 #Javascript
javascript中this关键字详解
Dec 12 #Javascript
深入理解javascript函数参数与闭包
Dec 12 #Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 #Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 #Javascript
You might like
PHP 获取文件权限函数介绍
2013/07/11 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
用javascript实现自定义标签
2007/05/08 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
python3爬取各类天气信息
2018/02/24 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
对python 命令的-u参数详解
2018/12/03 Python
如何理解python对象
2020/06/21 Python
详解rem 适配布局
2018/10/31 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
就业推荐自我鉴定
2013/10/06 职场文书
六十大寿答谢词
2014/01/12 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
大学生旷课检讨书
2014/01/22 职场文书
初中家长寄语
2014/04/02 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
办公室规章制度范本
2015/08/04 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书