Vertically center background

[asasass]

To be able to test different curtain background styles more easily, I separated the curtain from the code here.

I almost got it here: https://jsfiddle.net/p7ezjcbw/2/

It’s not vertically centered.

[PaulOB]

That code is nothing like the structure from your other page. You won’t achieve what you want with that code.

the curtain is outside the ratio keeper in the other code and the whole code is in a flex construction in order to centre it all.

The minimum you will need would be this.

.outer {
  display: flex;
  min-height: 100vh;
  align-content: center;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.curtain {
  margin: auto;
  flex: 1 0 0;
  max-width: 642px;
  box-shadow: inset 0 -2px 0px 0px #0a0a0a;
  background: linear-gradient(transparent 50%, transparent 50%),
    linear-gradient(90deg, transparent, red, transparent);
  background-size: 100% 2px, 3px 100%;
  background-position: center;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  /*transition: background 6s ease;*/
}

 <div class="outer">
   <div class="curtain ">
     <div class="ratio-keeper">
     </div>
   </div>
 </div>

[asasass]

I next added a spinning fan which is visible here: https://jsfiddle.net/f0Lcgpwz/5/

After placing it underneath ratio-keeper it disappears: https://jsfiddle.net/g3dz7ja0/2/

In order for it to be centered in the middle, it needs to be under ratio-keeper, right?

With it not placed under ratio-keeper, the height of the background expands.

What am I doing wrong?

.curtain {
  margin: auto;
  flex: 1 0 0;
  margin: auto;
  max-width: 642px;
  box-shadow: inset 0 -2px 0px 0px #0a0a0a;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path stroke="red" d="m10 .15-4.85 4.85 4.85 4.85v.15h-.13l-4.86-4.86-4.86 4.86h-.15v-.14l4.87-4.86-4.87-4.87v-.13h.15l4.86 4.86 4.85-4.86h.14z"/></svg>');
}

.fan svg {
  animation: fan-spin 40s infinite linear;
}


@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

 <div class="outer">
   <div class="curtain ">
     <div class="ratio-keeper">
       <div class="fan">
         <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="76 130 381 381">
           <path fill="#000100" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" /></svg>
       </div>
     </div>
   </div>
 </div>

[asasass]

Update:

I figured it out: https://jsfiddle.net/85v49bny/

.fan svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
  margin: auto;
  animation: fan-spin 40s infinite linear;
}


@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}