定位的盒子居中方法

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

猜你喜欢

转载自blog.csdn.net/qq_32827261/article/details/65631251