How to vertically center an image in a DIV using CSS

December 29, 2020 admin

In this tutorial, we are going to see how to vertically center an image in a DIV using CSS. You can adjust an image vertically in the center of a <div> using the CSS vertical-align attribute with display: table-cell; on the div element enclosing the image.

CSS Code:

img {
    display: block;
    margin: 0 auto;
}

.container {
    display: inline-block;
    margin: 30px;
}

.box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 250px;
    height: 200px;
    border: 1px solid black;
}

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vertically center an image in a DIV using CSS</title>
		<style>
			/* Put the CSS Style Here */
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<img src="https://stackhowto.com/test.jpg">
			</div>
		</div>
	</body>
</html>