Categories
CSS

Center an HTML element in the screen

The following sample shows how to center an HTML image in the screen, vertically as well as horizontally. The image will shift to maintain the centre as the window size is changed.

For more detail, see this link.

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Your Website</title>
	<style>
	.Absolute-Center {
		margin: auto;
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		}
	</style>
	</head>
<body>
	<img src="image.jpg" class="Absolute-Center" />
</body>
</html>