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

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

<!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>
请问垂直水平的问题在哪？
多谢

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

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

{:10_277:}

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

{:10_266:}

我爱鱼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

谢谢{:10_254:}
页: [1]
查看完整版本: 不二如是老师的html5+css3 第五节课程垂直居中失败