美文网首页
css3-实现任意元素居中显示

css3-实现任意元素居中显示

作者: AssertDo | 来源:发表于2019-08-27 10:07 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 400px;
                height: 400px;
                border-radius: 200px;
                background-color: #ccc;
                margin:100px auto;
                position: relative;
            }
            .rec{
                width: 200px;
                height: 200px;
                background-color: red;
                position: absolute;
                /*定位的百分比是参照父容器的宽高*/
                left: 50%;
                top: 50%;
                /*使用transform实现元素的居中  百分比是参照元素本身的宽高*/
                transform: translate(-50%,-50%);
            
            }
        </style>
    </head>
    <body>
    <div class="box">
        <div class="rec"></div>
    </div>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:css3-实现任意元素居中显示

          本文链接:https://www.haomeiwen.com/subject/bkusectx.html