单个div水平居中常用的方式

话不多说先上要实现的效果：（很简单水平居中）

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素水平居中的方法</title>
    </head>
    <style type="text/css">
    /* 方式一 margin 0 auto*/
    .box{
        width: 100px;
        height: 100px;
        color: #fff;
        background: #000000;
        margin: 0 auto;
    }
    </style>
    <body>
        <div class="box">方式一</div>
    </body>
</html>
    /* 方式二 */
    .box{
        width: 100px;
        height: 100px;
        color: #fff;
        background: #000000;
        margin-left: auto; 
        margin-right: auto;
    }
    /* 方式三 定位*/
    .box{
        width: 100px;
        height: 100px;
        color: #fff;
        background: #000000;
        position: absolute;
        left: 50%;
        margin-left: -50px;
    }

 

posted @ 2020-11-29 16:54  蓝色帅-橙子哥  阅读(165)  评论(0)  编辑  收藏  举报