我写了一个简单的 html 代码来将 img 居中放置在 html 正文中，它在具有不同浏览器的 Windows 上和垂直手机上工作正常，只有当我旋转手机时 img 没有调整大小。主要问题是当我在 Mac 上打开这个网站时，居中不适用于所有浏览器!!! 这是我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="img/icon.png">
<title>LaBera</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="includes/bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script type="text/javascript" src="includes/jquery-1.11.3.js"></script>
<script src="includes/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<style>
html {
height: 100%;
position: relative;
}
body {
background-image: url("img/pattern-small.png");
background-repeat: repeat-x-y;
height: 100%;
overflow: hidden;
position: relative;
}
.centerimg {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="container ">
<div class="centerimg">
<img src="img/logo1300.gif" class="img-responsive" alt="Logo" width="241px" height="400px">
</div>
</div>
<footer class="footer navbar-fixed-bottom">
<img src="img/footerNoShadow.gif" class="img-responsive" alt="Footer" height="66px">
</footer>
</body>
</html>
最佳答案
试试这个:
<style>
html {
height: 100%;
position: relative;
}
body {
background-image: url("img/pattern-small.png");
background-repeat: repeat-x-y;
height: 100%;
overflow: hidden;
position: relative;
}
.centerimg {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
transform: translate(-50%, -50%);
}
</style>
请注意对您的转换属性所做的更改，添加的前缀是为了浏览器支持，这可能会解决您的问题
关于jquery - 居中 img inside body，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33048182/