我怎样才能让所有的东西都集中在每台设备上？ [复制]
Posted
技术标签:
【中文标题】我怎样才能让所有的东西都集中在每台设备上？ [复制]【英文标题】：How can i make everything center in every device? [duplicate] 【发布时间】：2019-04-21 05:45:10 【问题描述】：我做了一个简单的website，
但是，并非所有内容都集中在每台设备的中间。我不确定这只是发生在我身上还是我没有做正确的事情。
这就是我的pc上的样子
这就是我的phone上的样子
这是 sn-p - 尝试在您的手机上打开 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>【问题讨论】：
我建议你使用 Bootstrap 而不是重新发明***。您指的是您的网站在各种设备上的响应能力。因此，如果您还没有这样做，请尝试 Bootstrap。 【参考方案1】：使用绝对位置和上/左 50% 来居中对象是不好的做法。 你可以通过使用 flex 做得更好。设置容器有
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>【讨论】：
【参考方案2】：Bootstrap 可根据屏幕尺寸做出响应。 我一直很幸运使用 Bootstrap 而不是在 css 中做这样的事情：
.main
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
看看这个网站： https://getbootstrap.com/docs/4.0/layout/grid/
【讨论】：
以上是关于我怎样才能让所有的东西都集中在每台设备上？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
透明视频，如何在每台设备上正确显示 webm 文件的 alpha 通道； VP9 还是 VP8 编码？