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















                      -

                      這個網誌中的熱門文章

                      Tangent Lines Diagram Along Smooth Curve

                      圖片
                      7 1 I am trying to replicate a diagram and have a minimal example. I don't know how to add additional tangents between the specified points and preserve smoothness. documentclass{article} usepackage{tikz} usetikzlibrary{calc,intersections} begin{document} begin{tikzpicture} % Axes draw [->, name path=x] (-1,0) -- (11,0) node [right] {$x$}; draw [->] (0,-1) -- (0,6) node [above] {$y$}; % Origin node at (0,0) [below left] {$0$}; % Points coordinate (start) at (1,-0.8); coordinate (c1) at (3,3); coordinate (c2) at (5.5,1.5); coordinate (c3) at (8,4); coordinate (end) at (10.5,-0.8); % show the points foreach n in {start,c1,c2,c3,end} fill [black] (n) circle (2pt) node [below] {}; % join the coordinates draw [thick,name path=curve] (start) to[out=70,in=180] (c1) to[out=0,in=180]
                      閱讀完整內容

                      Yusuf al-Mu'taman ibn Hud

                      圖片
                      Main article: Taifa of Zaragoza Al-Mu'taman Ruler of Zaragoza Reign 1081–1085 Predecessor Ahmad al-Muqtadir Successor Al-Mustain II Born Zaragoza Died 1085 Full name Yusuf ibn Ahmad al-Mu'taman ibn Hūd House Banu Hud Yusuf ibn Ahmad al-Mu'taman ibn Hūd (Arabic: المؤتمن بالله يوسف إبن أحمد إبن هود ‎, al-Mutaman bi l-Lah , died c. 1085) was the third king of the Banu Hud dynasty who ruled over the Taifa of Zaragoza from 1081 to 1085. Yusuf al-Mutaman reigned during the height of power of Muslim Zaragoza , following the thriving period of his father Ahmad al-Muqtadir. He continued his father's efforts and created around him a court of intellectuals, living in the beautiful palace of Aljafería, nicknamed as "the palace of joy". Al-Mu'taman was also a scholarly king and a patron of science, philosophy and arts. As an example of a wise king, he knew astrology, philosophy, and especially mathematics, a discipline in which
                      閱讀完整內容

                      Zucchini

                      圖片
                      This article is about the vegetable. For other uses, see Zucchini (disambiguation). Zucchini (courgette) A striped and a uniform color zucchini Genus Cucurbita Species Cucurbita pepo Origin 19th century northern Italy The zucchini ( / z uː ˈ k iː n i / , American English) or courgette ( / k ʊər ˈ ʒ ɛ t / , British English) is a summer squash which can reach nearly 1 metre (100 cm; 39 in) in length, but is usually harvested when still immature at about 15 to 25 cm (6 to 10 in). [1] A zucchini is a thin-skinned cultivar of what in Britain and Ireland is referred to as a marrow. [2] [3] In South Africa, a zucchini is known as a baby marrow. Along with certain other squashes and pumpkins, the zucchini belongs to the species Cucurbita pepo . It can be dark or light green. A related hybrid, the golden zucchini, is a deep yellow or orange color. [4] In a culinary context, the zucchini is treated as a vegetable; it is usually cooked and presented as a savory dish o
                      閱讀完整內容