水平方向布局 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>水平方向布局</title>
        <style>
        /* 
            如果left和right都设置为auto，则会两侧外边距设置的是相等的值，从而导致子元素在父元素中水平居中
         */
            .box{
                width: 100px;
                height: 100px;
                border:3px yellow solid;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

 

posted @ 2022-05-09 14:07  氯丙嗪  阅读(22)  评论(0)    收藏  举报