sgarcia-dev/relative-boxes.html

## relative-boxes.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sample Page</title>
</head>
<body>
  <div class="container">
    <div class="box is-h-centered is-v-centered">
      <div class="top-left">
        <div class="smaller-box"></div>
      </div>
      <div class="bottom-right">
        <div class="smaller-box"></div>
      </div>
    </div>
  </div>
</body>
<style>
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.container {
  width: 100vw;
  height: 100vh;
  background-color: gray;
}

.box {
  width: 50%;
  height: 50%;
  border: 5px dashed white;
}

.is-h-centered {
  margin-left: auto;
  margin-right: auto;
}

.is-v-centered {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.smaller-box {
  width: 100px;
  height: 100px;
  border: 5px dashed darkslategray;
}

.top-left, .bottom-right {
  position: absolute;
}

.top-left {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}


.bottom-right {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
}
</style>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Sample Page</title>
	</head>
	<body>
	<div class="container">
	<div class="box is-h-centered is-v-centered">
	<div class="top-left">
	<div class="smaller-box"></div>
	</div>
	<div class="bottom-right">
	<div class="smaller-box"></div>
	</div>
	</div>
	</div>
	</body>
	<style>
	body {
	margin: 0;
	}

	* {
	box-sizing: border-box;
	}

	.container {
	width: 100vw;
	height: 100vh;
	background-color: gray;
	}

	.box {
	width: 50%;
	height: 50%;
	border: 5px dashed white;
	}

	.is-h-centered {
	margin-left: auto;
	margin-right: auto;
	}

	.is-v-centered {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	}

	.smaller-box {
	width: 100px;
	height: 100px;
	border: 5px dashed darkslategray;
	}

	.top-left, .bottom-right {
	position: absolute;
	}

	.top-left {
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	}


	.bottom-right {
	bottom: 0;
	right: 0;
	transform: translate(50%, 50%);
	}
	</style>
	</html>