认识margin盒子居中margin:0 auto；----在标准文档流中盒子居中

最新推荐文章于 2024-06-25 14:30:45 发布

正在修炼web的小芮

最新推荐文章于 2024-06-25 14:30:45 发布

阅读量378

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_71814235/article/details/125615446

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

margin的值可以为auto，表示自动。
当left、right两个方向，都是auto的时候，盒子居中了：
简写：
盒子水平居中 :
margin: 0 auto;

用小属性分开写:
margin-right: auto;
margin-left: auto ;

<style>
        .container{
              /* 盒子居中margin:0 auto;----在标准文档流中盒子居中 */
            width: 1200px;
            height: 120px;
            outline: 1px dashed red;
            /* 水平居中 */
            /* margin: 0 auto; */
/*用小属性分开写：*/
     
            margin-right: auto;
            margin-left: auto ;
        }
        .parent{
            width: 600px;
            height: 300px;
            border: 1px solid skyblue;
            margin: 20px auto;
        }
        .son{
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: auto;
            margin-top: 49px;
            margin-bottom: 49px;
            /* 文本的居中 */
            text-align: center;
        }
        
    </style>
</head>
<body>
    <br><br>
    <div class="container"></div>
    <div class="parent"></div>
    <div class="son">小芮</div>
</body>

预览效果图