How can i make everything center in every device? [duplicate]












3
















This question already has an answer here:




  • How to vertically center a div for all browsers?

    40 answers



  • CSS center text (horizontally and vertically) inside a div block

    23 answers



  • Flexbox: center horizontally and vertically

    10 answers



  • CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

    6 answers



  • How to horizontally center a <div>?

    93 answers




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>








html css







share|improve this question













marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 18 '18 at 21:54


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • 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
















3
















This question already has an answer here:




  • How to vertically center a div for all browsers?

    40 answers



  • CSS center text (horizontally and vertically) inside a div block

    23 answers



  • Flexbox: center horizontally and vertically

    10 answers



  • CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

    6 answers



  • How to horizontally center a <div>?

    93 answers




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>








html css







share|improve this question













marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 18 '18 at 21:54


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • 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














3












3








3









This question already has an answer here:




  • How to vertically center a div for all browsers?

    40 answers



  • CSS center text (horizontally and vertically) inside a div block

    23 answers



  • Flexbox: center horizontally and vertically

    10 answers



  • CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

    6 answers



  • How to horizontally center a <div>?

    93 answers




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>








html css







share|improve this question















This question already has an answer here:




  • How to vertically center a div for all browsers?

    40 answers



  • CSS center text (horizontally and vertically) inside a div block

    23 answers



  • Flexbox: center horizontally and vertically

    10 answers



  • CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

    6 answers



  • How to horizontally center a <div>?

    93 answers




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>







This question already has an answer here:




  • How to vertically center a div for all browsers?

    40 answers



  • CSS center text (horizontally and vertically) inside a div block

    23 answers



  • Flexbox: center horizontally and vertically

    10 answers



  • CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

    6 answers



  • How to horizontally center a <div>?

    93 answers







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>





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>





html css




html css






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 18 '18 at 20:04









Maksym KaszaMaksym Kasza

184




184




marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 18 '18 at 21:54


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 18 '18 at 21:54


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • 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



















  • 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

















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





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












2 Answers
2






active

oldest

votes


















1














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>








share|improve this answer































    0














    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/






    share|improve this answer






























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      1














      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>








      share|improve this answer




























        1














        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>








        share|improve this answer


























          1












          1








          1







          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>








          share|improve this answer













          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>








          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>





          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>





          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>





          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>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 18 '18 at 20:57









          Itay GalItay Gal

          8,05252560




          8,05252560

























              0














              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/






              share|improve this answer




























                0














                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/






                share|improve this answer


























                  0












                  0








                  0







                  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/






                  share|improve this answer













                  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/







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 18 '18 at 20:20









                  Mark BMark B

                  6619




                  6619















                      -

                      這個網誌中的熱門文章

                      Xamarin.form Move up view when keyboard appear

                      圖片
                      .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 I'm trying to build a Chat app UI, the idea of the Layout was pretty simple: When the input bar is focused, keyboard show up and "push" up the chat bar, as it's a grid, the ListView will resize to fit the screen: I update the input bar's margin to "push" it up: NSValue result = (NSValue)args.Notification.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey)); CGSize keyboardSize = result.RectangleFValue.Size; if (Element != null){ Element.Margin = new Thickness(0, 0, 0,keyboardSize.Height); //push the entry up to keyboard height when keyboard is activated } And this is ...
                      閱讀完整內容

                      Post-Redirect-Get with Spring WebFlux and Thymeleaf

                      圖片
                      .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 2 Can someone explain to me how to implement the post-redirect-get pattern in Spring WebFlux and Thymeleaf? What subscribes on the database save method? @GetMapping("/register") public String showRegisterForm(Model model) { model.addAttribute("user", new User()); return "register"; } @PostMapping public String processRegisterForm(@Valid User user, BindingResult bindingResult) { if (bindingResult.hasErrors()) { return "register"; } else { userRepository.save(user); //what subscribes on this? //how to redirect on e.g. "/login"? ...
                      閱讀完整內容

                      Anylogic : not able to use stopDelay()

                      圖片
                      -2 I am building a railway station model. I want a train to depart when I click a button. I want to call stopDelay() for that but I am not sure how to do that and from which place. anylogic share | improve this question asked Nov 23 '18 at 10:12 Anupam Singh Anupam Singh 1 Hi Anupam, welcome to SOF. Please check how to ask good questions, see link below. Your question is...
                      閱讀完整內容