HTML5-学习之路漫漫，div中的div垂直水平都居中

来源：互联网发布：linux tomcat日志分割编辑：程序博客网时间：2024/05/19 16:07

之前搞Android的，所以碰到这种问题一时不知该如何下手

先看一下效果：

这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>FragmeLayout</title>    </head>    <body>        <div style="height: 500px;width: 500px;background: greenyellow;" align="center">            <div style="height: 400px;width: 400px;background: grey;position:relative;top: 50px;" align="center">                <div style="height: 300px;width: 300px;background: aquamarine;position:relative;top: 50px;" align="center">                    <div style="height: 200px;width: 200px;background: brown;position:relative;top: 50px;" align="center">                        <div style="height: 100px;width: 100px;background:cornflowerblue;position:relative;top: 50px;text-align: center;line-height: 100px;" align="center">                            Hello world!                        </div>                    </div>                </div>            </div>        </div>    </body></html>

关键一行在于：
position: relative; 通过css,将div的位置设置为“相对的”

设置为：绝对时：
position:absolute;

这里写图片描述

稍微修改下：

这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>FragmeLayout</title>    </head>    <body>        <div style="height: 500px;width: 500px;background: greenyellow;" align="center">            <div style="height: 400px;width: 400px;background: grey;position:absolute;top: 50px;left: 50px;" align="center">                <div style="height: 300px;width: 300px;background: aquamarine;position:absolute;top: 50px;left: 50px;" align="center">                    <div style="height: 200px;width: 200px;background: brown;position:absolute;top: 50px;left: 50px;" align="center">                        <div style="height: 100px;width: 100px;background:cornflowerblue;position:absolute;top: 50px;left: 50px;text-align: center;line-height: 100px;" align="center">                            Hello world!                        </div>                    </div>                </div>            </div>        </div>    </body></html>

这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>FragmeLayout</title>    </head>    <body>        <div style="height: 500px;width: 1000px;display: flex;">            <div style="height: 500px;width: 500px;background: greenyellow;display: inline-block;" align="center">                <div style="height: 400px;width: 400px;background: grey;position:relative;top: 50px;" align="center">                    <div style="height: 300px;width: 300px;background: aquamarine;position:relative;top: 50px;" align="center">                        <div style="height: 200px;width: 200px;background: brown;position:relative;top: 50px;" align="center">                            <div style="height: 100px;width: 100px;background:cornflowerblue;position:relative;top: 50px;text-align: center;line-height: 100px;" align="center">                                Hello world!                            </div>                        </div>                    </div>                </div>            </div>            <div style="height: 500px;width: 500px;background: greenyellow;display: inline-block;" align="center">                <div style="height: 400px;width: 400px;background: grey;position:relative;top: 50px;" align="center">                    <div style="height: 300px;width: 300px;background: aquamarine;position:relative;top: 50px;" align="center">                        <div style="height: 200px;width: 200px;background: brown;position:relative;top: 50px;" align="center">                            <div style="height: 100px;width: 100px;background:cornflowerblue;position:relative;top: 50px;text-align: center;line-height: 100px;" align="center">                                Hello world!                            </div>                        </div>                    </div>                </div>            </div>        </div>    </body></html>

如果彻底学会这块代码中的思想，我想做什么UI都很好说了

阅读全文

0 0