实现图片在浏览器页面中居中显示
2017-11-29 17:10
323 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现图片在浏览器页面垂直居中</title>
<style>
img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div>
<img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>transform:translate(-50%,-50%);指的是图片向左移动自身宽度的50%,向上移动自身高度的50%。
transform:translate(X,Y);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实现图片始终居中显示于浏览器窗口中心位置
- 实现动态加载的图片页面中纵向居中显示
- 实现xlistview+xutils展示数据之后点击item跳转页面显示图片缩放和放大
- css实现图片上下居中显示
- javascript实现刷新页面随机显示图片
- springmvc实现图片下载和在浏览器显示以及nginx代理访问图片
- 重写button实现文字图片居中显示
- struts中用kindeditor实现的图片上传并且显示在页面上
- 实现div的背景图片在各个浏览器上自适应显示：即backgroun-size属性不支持低版本ie的解决方案
- JSP页面，实现上传图片即时显示效果
- 如何实现mdi窗口中显示图片上部居中
- 用Seam实现：图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
- 如何实现广告图片总是显示在页面上方，并且随滚动条同步移动？
- JavsScript实现不通过后台，实时显示上传图片的显示效果，兼容各个版本浏览器
- JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
- 用Seam实现：图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
- spring boot实现上传图片并在页面上显示
- vue实现的上传图片到数据库并显示到页面功能示例
- Ext页面根据浏览器大小显示全部，页面居中 .
- 纯js实现Div在页面垂直居中！可根据浏览器大小的改变而改变！兼容各种浏览器----神器版！