CSS小盒子和大盒子中水平垂直居中的办法

最新推荐文章于 2023-05-11 09:17:22 发布

棉马咪

最新推荐文章于 2023-05-11 09:17:22 发布

阅读量704

点赞数

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/mianmami/article/details/117993673

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

方法一：padding

通过设置大盒子的padding属性和box-sizing属性，将小盒子挤到居中的位置。

<html >
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
       *{margin: 0; padding: 0}
       .out{
           height: 500px;
           width: 500px;
           background: red;
           padding: 150px;
           box-sizing: border-box;
       }

       .inner{
           height: 200px;
           width: 200px;
           background: blue;

       }

    </style>
</head>
<body>
<div class="out">
    <div class="inner"></div>
</div>

</body>
</html>

方法2：margin

通过设置小盒子距离大盒子的margin来设置。
设置margin的时候千万要注意：如果设置子元素margin-top属性，那么父元素就会自动添加上margin-top属性，由此起不到居中的效果(left/right/bottom则不会)。解决这个的办法就是给父元素添加边框。
如果要设置子元素在父元素中水平居中，固定的写法是：margin: 0 auto

<html >
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
       *{margin: 0; padding: 0}
       .out{
           height: 500px;
           width: 500px;
           background: red;
           border: 1px solid #000;

       }

       .inner{
           height: 200px;
           width: 200px;
           background: blue;
           margin: 150px;
       }

    </style>
</head>
<body>
<div class="out">
    <div class="inner"></div>
</div>

</body>
</html>

总结：
工业中，由于margin-top的特例，且margin常用于兄弟元素之间，在设置父子水平垂直居中的时候，通常采用第一种方法(padding)。

棉马咪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS小盒子和大盒子中水平垂直居中的办法

方法一：padding通过设置大盒子的padding属性和box-sizing属性，将小盒子挤到居中的位置。<html ><head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin: 0; padding: 0} .out{ height: 500px;
复制链接

扫一扫