垂直居中position: relative

来源:互联网 发布:上海近几年gdp数据 编辑:程序博客网 时间:2024/05/17 01:50
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>垂直居中</title>    <style>        #div1{            width: 300px;            height: 300px;            background-color: #FF6500;            position: relative;(relative :  对象不可层叠,但将依据left,
                                                               right,top,bottom等属性在正常文档流中偏移位置)        }        #div2{            width: 200px;            height: 200px;            background-color: white;            position: relative;            left: 50%;            margin-left: -100px;            top: 50px;        }    </style></head><body><div id="div1">    <DIV id="div2">    </DIV></div></body></html>
去除
 #div1中       position: relative;
 #div2            position: relative;            left: 50%;            margin-left: -100px;            top: 50px; 效果为     
0 0
原创粉丝点击