css 如何让图片在任意大小的显示器里保持居中

Question

css 如何让图片在任意大小的显示器里保持居中

辛某

180114950

发布于
2013-02-01

更新于
2013-02-01

请问下怎么让一张图片在任何大小的和分辨率的浏览器中保持居中效果

背景图片不用是内容图片就是普通的图片怎么让它可以在任意的游览器下获得居中就是上下左右都是在中间页面放大或者是缩小都可以随的页面的变化而改变图片的位置一直保持上下左右居中的效果图片是固定的大小

css

阅读 27k

1 个回答

得票最新

Myfreedom614

87112

发布于
2013-02-01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!-- 
body {
	margin:0;padding:0
	}
div {
	width:500px;
	height:500px;
	line-height:500px;
	/*border:1px solid #ccc;*/
	overflow:hidden;
	position:relative;
	text-align:center;
	margin:auto
	}
div p {
	position:static;
	+position:absolute;
	top:50%
	}
img {
	position:static;
	+position:relative;
	top:-50%;left:-50%;
	width:350px;
	height:350px;
	vertical-align:middle
	}
p:after {
	content:".";font-size:1px;
	visibility:hidden
	}
-->
</style>

<div><p><img src="YourImage.jpg"/></p></div>

你可以参考下这个代码

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

css 如何让图片在任意大小的显示器里保持居中

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

如何在CSS中实现滚动条不溢出圆角框？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？

怎么用css 实现这个形状？

表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？