定位的盒子居中方法

来源:互联网 发布:剑网三 大叔脸型数据 编辑:程序博客网 时间:2024/05/21 06:55
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .box{            width: 400px;            height: 200px;            background-color: red;            /*使用了position定位属性的盒子就无法使用margin:200px auto;居中了*/            position: absolute;            top:200px;      /*就要使用以下两种方式*/            /*1.盒子传统居中方式             left:50%;            margin-left:-200px;*/            /*2. 使用css3 来实现居中*/            left:50%;            /* 向左走自身宽度的一半*/            transform:translate(-50%);        }    </style></head><body>    <div class="box"></div></body></html>
0 0
原创粉丝点击