I have created a simple HTML code to center an image inside the body of an HTML page. It works perfectly on Windows with various browsers, and on phones vertically when rotated. However, the issue arises when I open the site on a Mac as the centering does not work with all browsers. Here is the code snippet:
<!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>