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

最新推荐文章于 2022-11-03 22:54:50 发布

开心大表哥

最新推荐文章于 2022-11-03 22:54:50 发布

阅读量8.4k

点赞数 5

分类专栏： css3 文章标签： css3 transform

本文链接：https://blog.csdn.net/a419419/article/details/80068402

版权

css3 专栏收录该内容

25 篇文章 3 订阅

订阅专栏

这里写图片描述

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

主角从来不用回头看爆炸，拜！

开心大表哥

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
一秒入门：不定宽高的水平垂直居中简单方式

&lt;html&gt; &lt;meta charset="UTF-8"&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;div class="wrap"&gt; &lt;p&gt;铺设大量智能设备，使用
复制链接

扫一扫

专栏目录