[已解决]不二如是老师的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: 100%;

因为父级元素是相对定位，所以要利用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: 100%;

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

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

谢谢

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