How can I make my logo stay in the middle and be responsive?

Question

Basically, I have created a loader for my website. I am also creating a logo for my website that is inside the loader that spins, however, the logo is not responsive. I would like my logo to be in the middle of my loader, but, when someone goes to view it on their window screen, the logo moves to somewhere other than the middle. How can I prevent it from moving and let it stay in the middle regardless of someone's window size? Any help would be appreciated. Thanks. Here is my code.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div class="load">
    <p id = "spinner">M</p>
    <div class="container">
        <div class="loader">
          <div class="loader">
            <div class="loader">
              <div class="loader">
                <div class="loader">
                  <div class="loader">
                    <div class="loader">
                      <div class="loader">
                        <div class="loader">
                          <div class="loader">
                            <div class="loader">
                              <div class="loader">
                                <div class="loader">
                                  <div class="loader">
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> 
   </div>
      <div class = "box-area">
        <header>
           <div class="wrapper">
               <div class="logo">
                   <a href="#">Front Page</a>
               </div>
               <nav>
                   <a href="#">Home</a>
                   <a href="#">About</a>
                   <a href="#">Portfolio</a>
                   <a href="#">Blog</a>
                   <a href="#">Contact</a>
               </nav>
           </div>
        </header>
        <div class="banner-area">
        </div>
        <div class="content-area">
            <div class="wrapper">
                <h2>Test</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, aspernatur eos, fugit optio vero ratione dolore consequatur suscipit quo nesciunt eveniet ipsam! Necessitatibus, facilis odio? Cupiditate molestiae expedita voluptas atque!</p>
            </div>
        </div>
       </div>
<script src="load.js"></script>
</body>
</html>

CSS

body{
    background: black;
}

.container{
    position: absolute;
    height: 400px;
    width: 200px;
    top: 20%;
    left: 43%;
}

.loader{
    height: 95%;
    width: 95%;
    margin: 2.5%;
    border-top: 3px solid #40e0d0;
    border-bottom: 3px solid darkgreen;
    border-radius: 50%;
    animation: 30s rotate linear infinite;
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(810deg);
    }
}

body{
    text-align: center;
}

.wrapper{
    width: 1170px;
    margin: 0 auto;
}

header{
    height: 100px;
    background: #262626;
    width: 100%;
    z-index: 12;
    position: fixed;
}

.logo{
    width: 30%;
    float: left;
    line-height: 100px;
}

.logo a{
    text-decoration: none;
    font-size: 30px;
    font-family: bignoodletitling;
    color: #fff;
    letter-spacing: 5px;
}

nav{
    float: right;
    line-height: 100px;
}

nav a{
    text-decoration: none;
    font-family: bignoodletitling;
    letter-spacing: 4px;
    font-size: 20px;
    margin: 0 10px;
    color: #fff;
}

.banner-area{
    width: 100%;
    height: 500px;
    position: fixed;
    top: 100px;
    background-image: url(mountain\ copy.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
}

.banner-area h2{
    padding-top: 8%;
    font-size: 70px;
    font-family: poppins;
    text-transform: uppercase;
    color: #fff;
}

.content-area{
    width: 100%;
    position: relative;
    top: 450px;
    background: #ddd;
    height: 1500px;
}

.content-area h2{
    font-family: bignoodletitling;
    letter-spacing: 4px;
    padding-top: 30px;
    font-size: 40px;
    margin: 0;
}

.content-area p{
    padding: 2%;
    font-family: bignoodletitling;
    line-height: 30px;
}

.load {
  width: 100%;
  position: fixed;
  height: 100vh;
  z-index: 99;
  overflow: hidden;
  background: #000;
}

#spinner{
    font-size: 50px;
    text-align: center;
    animation-name: spin, depth;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    transform-style: preserve-3d;
    position: relative;
    top: 270px;
    color: blueviolet;
    font-family: 'Hind', sans-serif;

}

#spinner::before, #spinner::after{
    content: "G";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transform: rotateY(0.5deg);
    transform-origin: 0 50%;
}

#spinner::after{
    transform: rotateY(-0.5deg);
    transform-origin: 100% 50%;
}

@keyframes spin{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(-360deg)
    }
}

@keyframes depth {
    0% { text-shadow: 0 0 black; }
    25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black, 6px 0 black; }
    50% { text-shadow: 0 0 black; }
    75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black, -6px 0 black; }
    100% { text-shadow: 0 0 black; }
  }

JS

 $(window).on('load', function() {
    $('.load').delay(3000).fadeOut(1000);
  });

$(window).on('spinner', function() {
    $('.spinner').delay(3000).fadeOut(1000);
  });

Answer 1

A flexbox approach, centers all content in your load class.

.load {
  display: flex;
  justify-content: center;
}

Answer 2

.spinner {
  width: 20px;
  margin: 0 auto; 
}

https://learnlayout.com/margin-auto.html

How can I make my logo stay in the middle and be responsive?

Question

2 answers

solution1
1 2020-09-25 21:25:39

solution2
0 2020-09-25 20:47:39

How can I make my logo stay in the middle and be responsive?

Question

2 answers

solution1 1 2020-09-25 21:25:39

solution2 0 2020-09-25 20:47:39

solution1
1 2020-09-25 21:25:39

solution2
0 2020-09-25 20:47:39