我做了一个简单的website，
但是，并非所有内容都位于每个设备的中间。我不确定这是发生在我身上还是我没有正确执行某些操作。
这就是我的pc
上的样子这就是我的phone
上的样子这是代码段-尝试在手机上打开website。谢谢
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>
答案 0 :(得分：1)
不好的做法是使用绝对位置和顶部/左侧50％来使对象居中。 通过使用flex，Yo可以做得更好。将容器设置为具有
display: flex;
align-items: center;
justify-content: center;
并删除绝对位置。另外，请注意，您有一些不受支持的CSS规则，例如padding-inline-start。 (Reference)
简单的使用示例
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>
答案 1 :(得分：0)
Bootstrap响应屏幕尺寸。 我一直很幸运使用Bootstrap而不是在CSS中做类似的事情：
.main{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)