css transform怎样设置位置不定的图片,变形原点始终处于屏幕中心
发布网友
发布时间：2022-05-13 14:05
共2个回答
热心网友
时间：2022-05-13 15:34
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0; margin: 0;}
html, body{height: 100%; min-height: 100%; position: relative;}
/* 方法1
.photo{text-align: center; display: table; width: 100%; height: 100%;}
.photo p{display: table-cell; vertical-align: middle;}*/
/*方法2*/
.photo{text-align: center; width: 100%;}
.photo img{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
</style>
</head>
<body>
<div class="photo">
<p>
<img src="http://www.kocla.com/upload/course/20150914/20150914095759_1.jpg"></img>
</p>
</div>
</body>
</html>
