一秒入门:不定宽高的水平垂直居中简单方式

这里写图片描述

<html>
    <meta charset="UTF-8">
    <body>
        <div class="container">
            <div class="wrap">
                <p>铺设大量智能设备,使用人数众多</p>
                <p>帮助客户快速涨粉,平均每日使用人数超100+</p>
                <p>按100台计算,每天涨粉人数10000+</p>
            </div>
        </div>
        <style>
            .container{
                /*这里只是一个最外层的盒子不是内容重点,重点是下面的wrap*/
                width: 500px;
                height: 500px;
                position: relative;
                background: goldenrod;
            }
            .wrap{
                background: #24FFD3;
                text-align: center;
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                -webkit-transform:translate(-50%,-50%);
                white-space: nowrap;/*不换行*/
            }
        </style>
    </body>
</html>

主角从来不用回头看爆炸,拜!

猜你喜欢

转载自blog.csdn.net/a419419/article/details/80068402