实现div里的img图片水平垂直居中
body结构
<body>
<div>
<img src="1.jpg" alt="haha">
</div>
</body>
方法一：
将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>
结果如下图所示：
方法二：
通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 高度的一半 */
margin-left: -25px; /* 宽度的一半 */
}
</style>
结果如下图所示：
实现div里的img图片水平垂直居中的更多相关文章
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css实现图片水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于div中图片水平垂直居中的问题
最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...
- CSS制作图片水平垂直居中 亲测推荐
空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...
- CSS中图片水平垂直居中方法小结
写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...
- DIV以及图片水平垂直居中兼容多种浏览器
纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈 第一种:全CSS控制 ...
- 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）
<div class="demo"><a href="#"><img src="http://nec.netease.c ...
- 未知宽高图片水平垂直居中在div
<BODY> <div class="box"> <span class="car"></span> <i ...
随机推荐
- hdu 1276士兵队列问题【queue】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1276 士兵队列训练问题 ...
- x,y
x,y在二维里,横纵坐标容易反,有关处理要小心.
- Spring Boot 项目实战（一）Maven 多模块项目搭建
一.前言 最近公司项目准备开始重构,框架选定为 Spring Boot ,本篇主要记录了在 IDEA 中搭建 Spring Boot Maven 多模块项目的过程. 二.软件及硬件环境 macOS S ...
- React Native之基于AsyncStorage的离线缓存框架设计
1.为什么要离线缓存? 宏观上来说: 提升用户体验: 我们要为用户提供流畅的APP操作体验,但我们无法保证所有用户的网络流畅度是好的,所以我们需要离线缓存来提升用户体验. 节省流量: 节省流量又分为两 ...
- CentOS 6.4在运行XFS时系统crash的bug分析
最近有一台CentOS 6.4的服务器发生多次crash,kernel version 是Linux 2.6.32-431.29.2.el6.x86_64.从vmcore-dmesg日志内容及cras ...
- [Web安全] XXE漏洞攻防学习（中）
0x00.XXE漏洞攻击实例 攻击思路: 1. 引用外部实体远程文件读取 2. Blind XXE 3. Dos 0x01.外部实体引用,有回显 实验操作平台:bWAPP平台上的XXE题目 题目: 进 ...
- Jekyll搭建github个人博客
一.安装ruby环境 Windows下载地址: http://rubyinstaller.org/ Ruby官网: http://www.ruby-lang.org/zh_cn/ 下载安装即可 环境配 ...
- Project_Lemon测评系统使用经验
Project_Lemon使用经验 如果您还没有安装Project_Lemon,那么请移步https://www.cnblogs.com/CreeperLKF/p/9201859.html去查阅安装教 ...
- luogu P2657 [SCOI2009]windy数 数位dp 记忆化搜索
题目链接 luogu P2657 [SCOI2009]windy数 题解 我有了一种所有数位dp都能用记忆话搜索水的错觉 代码 #include<cstdio> #include<a ...
- [HDU1598]find the most comfortable road
思路: 考虑一个暴力:枚举最大的边权和最小的边权,然后将边权在这之间的边全拿出来构成一张无向图,剩下的就是判断是否存在一条从$S$到$T$的路径.相当于判$S$和$T$是否连通,用并查集连一下即可.时 ...