user8473431 user8473431 - 2 months ago 11
CSS Question

How do I get the header in the middle of the page?

Trying to get the header and images under it right in the middle of the page but am having a lot of trouble figuring out how to do that. Tried manipulating the box model with no luck. I'm really new to this stuff so any advice helps.

enter image description here



body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}

img {
padding: 10px;
}

img:hover {
transform: scale(1.4);
transition:all 1s;
}

.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 400px;
}

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>

</div>
<script src="app.js"></script>
</body>
</html>




Answer Source

You could use flexbox for this

body {
  height: 100vh;
  background: radial-gradient(gold, goldenrod);
  font-family: monospace;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

img {
  padding: 10px;
}

img:hover {
  transform: scale(1.4);
  transition: all 1s;
}
<h1>Choose Your Weapon</h1>
<div class="container">
  <img src="images/rock.svg" alt="rock">
  <img src="images/paper.svg" alt="paper">
  <img src="images/scissors.svg" alt="scissors">
  <p></p>

</div>