定位的盒子居中方法

最新推荐文章于 2024-08-07 09:22:13 发布

古风天下_醉意人生

最新推荐文章于 2024-08-07 09:22:13 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_32827261/article/details/65631251

版权

<!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>