在子绝父相的盒子中,给不设宽高的子盒子使用该种居中方法时,子元素的宽度默认为父元素宽度的一半

最新推荐文章于 2023-05-07 00:26:56 发布

Breeze193

最新推荐文章于 2023-05-07 00:26:56 发布

阅读量398

点赞数 1

文章标签： html 开发语言 css 前端 css3

本文链接：https://blog.csdn.net/qq_55621199/article/details/127180215

版权

居中方法为: left: 50%; top: 50%; transform: translate(-50%,-50%);

话不多说,直接上代码

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 0 auto;
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .box p {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
           
        }
    </style>
</head>
<body>
    <div class="box">
        <p>这里有很多文字啊这里有很多文字啊这里有很多文字啊这里有很多文字啊这里有很多文字啊这里有很多文字啊</p>
    </div>
</body>

这种情况会导致里面的文字宽度大于父盒子宽度一半时自动折行