<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>让编程改变世界</title>
<style text="text/css">
html,body {
color: pink;
height: 100%;
font-family: sans-serif;
}
h1 {
font-size: 66px;
margin-bottom: 22px;
}
body {
background-size: cover;
background: url(003.jpg) center center;
margin: 0;
padding: 0;
position: relative;
}
#container {
position: absolute;
text-align: center;
width: 100%;
top: 50%;
<!-- container 这个div移到页面50% 下方，
想要真正实现内容也居中，则需要Y轴偏移-50%即可； -->
transform: translateY(-50%);
}
p {
font-size: 33px;
margin-bottom: 22px;
}
a {
font-size: 55px;
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.fishC.com--让编程改变世界</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>
</html>
不知为何竟然没居中~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST! TEST!!</title>
<style type="text/css">
html {
height: 100%;
font-family: sans-serif;
}
body {
margin: 0;
padding: 0;
/* position: relative; */
background: url(https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/532110/5b512f23e387af896fdb1589d7f8ae854e731cbd.jpg) center center;
background-size: cover;
}
#container {
width: 100%;
text-align: center;
position: absolute;
top:50%;
transform: translateY(-50%);
}
h1 {
color: pink;
font-size: 50px;
margin-bottom: 15px;
}
p {
color: honeydew;
font-size: 20px;
margin-bottom: 20px;
}
a {
font-size: 20px;
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>让编程改变世界!</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>
</html>