[已解决]不二如是老师的html5+css3 第五节课程垂直居中失败

我爱鱼C！ · 发表于 2018-7-14 08:48:53

您需要登录才可以下载或查看，没有账号？立即注册

x

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">
html {
height: 100%;
color: #FF0088;
/*设置颜色*/
}
body {
background: url("https://picsum.photos/1600/1200/?random") center center;/*导入居中得图片*/
background-size: cover;
margin: 0; /*初始化*/
padding:0; /*初始化*/
position: relative;
}
#container {
width: 100%;
text-align: center;
/*上面两行是水平居中*/
position: absolute;
top: 50%;
transform: translateY(-50%);
/*上面的是垂直居中*/
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼Ｃ</h1>
<p>www.fishc.com-让编程改变世界</p>
<a >咻!</a>
</div>
</body>
</html>

复制代码

请问垂直水平的问题在哪？
多谢

最佳答案

不二如是

2018-7-14 14:08:07

1、get用实用Tips - 32 - 超好用的#贴图网站 |【Lorem Picsum】中的在线贴图技巧，很棒！

2、请在body样式中添加：

复制代码

因为父级元素是相对定位，所以要利用height撑开，这样子元素才知道相对一个宽度进行top50%的移动

我爱鱼C！ · 发表于 2018-7-14 08:50:18

我爱鱼C！ · 发表于 2018-7-14 08:55:57

我爱鱼C！ · 发表于 2018-7-14 10:38:47

我爱鱼C！ · 发表于 2018-7-14 14:03:00

已解决:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">
html {
height: 100%;
color: #FF0088;
/*设置颜色*/
}
body {
background: url("https://picsum.photos/1600/1200/?random") center center;/*导入居中得图片*/
background-size: cover;
}
#container {
width: 100%;
text-align: center;
/*上面两行是水平居中*/
position: absolute;
top: 50%;
transform: translateY(-50%);
/*上面的是垂直居中*/
}
</style>
<body
margin: 0; /*初始化*/
padding:0; /*初始化*/
position: relative;>
</head>
<body>
<div id="container">
<h1>我爱鱼Ｃ</h1>
<p>www.fishc.com-让编程改变世界</p>
<a >咻!</a>
</div>
</body>
</html>

复制代码

初始化我写错了

不二如是 · 发表于 2018-7-14 14:08:07

1、get用实用Tips - 32 - 超好用的#贴图网站 |【Lorem Picsum】中的在线贴图技巧，很棒！

2、请在body样式中添加：

复制代码

因为父级元素是相对定位，所以要利用height撑开，这样子元素才知道相对一个宽度进行top50%的移动

我爱鱼C！ · 发表于 2018-7-16 20:52:52

谢谢

账号		自动登录	找回密码
密码			立即注册