Grid trick - stacking & centering (no position absolute needed)

9.9.2022

CSS CSS trick

index.html Raw #

<!--
https://jsbin.com/febanurovo/edit?html,css,output
-->

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<style>

.stacked {
	display: grid;
	border: 1px solid red;
	place-items: center;
	isolation: isolate;
}

.stacked > * {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}

.stacked > .media {
	z-index: -1;
}

img {
	max-width: 100%;
	height: auto;
}


</style>
<body>

	
	<div class="stacked">
		
		<h1>Some heading</h1>
		<img class="media" src="https://kinsta.com/wp-content/uploads/2021/07/web-components-1024x512.png" alt="">
	</div>
	
</body>
</html>