How can i make everything center in every device?

Question

I made a simple website,

However, not everything is centered in the middle on every device. I'm not sure is this is just happening to me or if I didn't do something correctly.

This is what it looks like on my pc

This is what it looks like on my phone

This is the snippet - try opening the website on your phone. Thanks

body{
    margin: 0;
    padding: 0;
    background: #262626;
    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
    font-style : italic;
    text-align: center; 
    -webkit-animation-direction: normal;
 -webkit-animation-duration: 22s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-name: text;
 -webkit-animation-timing-function: ease;  
}
h1{
    font-size: 100px;
}
.main{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
ul{
    display: flex;
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, 0)
}
ul li{
    list-style: none;
}
ul li a{
    transition: .5s;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 35px;
    display: block;
    -webkit-animation-direction: normal;
 -webkit-animation-duration: 22s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-name: text;
    -webkit-animation-timing-function: ease;
}
ul li a:hover{
    font-size: 45px;
}

#particles-js{
    background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;
}
#date{
    position: absolute;
    font-size: 25px;
}

@-webkit-keyframes text{
    0% {color: #39f;}
   15% {color: #8bc5d1;}
   30% {color: #f8cb4a;}
   45% {color: #95b850;}
   60% {color: #944893;}
   75% {color: #c71f00;}
   90% {color: #bdb280;}
  100% {color: #39f;}
}

<!doctype html>
<html>
    <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">
        
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

        <link href="styles.css" rel="stylesheet" type="text/css">
        <link rel="import" href="particles.html">
        <link rel="import" href="title.html">
        <link rel="import" href="dateCount.html">
        <link rel="icon" href="logo.png">

        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

    </head>

    <body>
        <div id="particles-js">
            <div class="main">
                <h1 id="date"></h1>
                <h1>kaszam</h1>
                <ul>
                    <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>
                    <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>
                    <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
                    <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

I suggest that you use Bootstrap rather than trying to reinvent the wheels. You're referring to responsiveness of your site on various devices. So just try Bootstrap if you have not done that yet. — Aika, Nov 18 '18 at 20:47

score 2 · Answer 1 · answered Nov 18 '18 at 20:57

It is bad practice to use position absolute and top/left 50% to center your objects. Yo can do it better by using flex. Set the container to have

display: flex;
align-items: center;
justify-content: center;

and remove the absolute position. Also, NOTE that you have some non supported css rules such as padding-inline-start. (Reference)

Simple example of use

html, body{
  height: 100%;
}

.container{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.center-me{
  width: 70px;
  height: 70px;
  border: 1px solid black;
  background-color: #bada55;
}

<div class="container">
  <div class="center-me"></div>
</div>

Your example with some fixed code that should do the trick

body{
    margin: 0;
    padding: 0;
    background: #262626;
    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
    font-style : italic;
    text-align: center; 
    -webkit-animation-direction: normal;
 -webkit-animation-duration: 22s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-name: text;
 -webkit-animation-timing-function: ease;  
}
h1{
    font-size: 100px;
}
.main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
ul{
    display: flex;
    padding-inline-start: 0px;
}
ul li{
    list-style: none;
}
ul li a{
    transition: .5s;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 35px;
    display: block;
    -webkit-animation-direction: normal;
 -webkit-animation-duration: 22s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-name: text;
    -webkit-animation-timing-function: ease;
}
ul li a:hover{
    font-size: 45px;
}

#particles-js{
    background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;
}
#date{
    position: absolute;
    font-size: 25px;
}

@-webkit-keyframes text{
    0% {color: #39f;}
   15% {color: #8bc5d1;}
   30% {color: #f8cb4a;}
   45% {color: #95b850;}
   60% {color: #944893;}
   75% {color: #c71f00;}
   90% {color: #bdb280;}
  100% {color: #39f;}
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<div id="particles-js">
  <div class="main">
    <h1 id="date"></h1>
    <h1>kaszam</h1>
    <ul>
      <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>
      <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>
      <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
      <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>
    </ul>
  </div>
</div>

score 0 · Answer 2 · answered Nov 18 '18 at 20:20

Bootstrap is responsive to screen sizes. I've always had good luck using Bootstrap instead of doing stuff like this in css:

.main{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)

Check out this site: https://getbootstrap.com/docs/4.0/layout/grid/

How can i make everything center in every device?

2 Answers2