<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet"> 
<div id="container">
  <div id="for-px">
    <h1 id="px-h1">For px</h1>
  </div>
  <div id="for-vw">
    <h1 id="vw-h1">For vw</h1>
  </div>
</div>

body {
  background: #caf0f8;
}
#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#for-px {
  display: flex;
  width: 150px;
  height: 50px;
  background: #03045e;
}
#px-h1 {
  margin: auto;
}
#for-vw {
  display: flex;
  width: 20vw;
  height: 20vh;
  background: #03045e;
  margin-top: 10vh;
}
#vw-h1 {
  font-size: 2vw;
  margin: auto;
}
h1 {
  color: white;
  font-family: 'Roboto', sans-serif;
}