父子关系盒子居中方法

最新推荐文章于 2023-09-01 22:20:06 发布

泡^沫8

最新推荐文章于 2023-09-01 22:20:06 发布

阅读量296

点赞数 6

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_74792903/article/details/127844309

版权

(1)第1居中方法 (定位+margin回移法)

1.html结构

/* 结构 */
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

2.css样式

 <style>     
       .father {
            /* 相对定位 */
            position: relative;
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: pink;
        }
       .father .son {
            /* 绝对定位 */
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: skyblue;

            /* 第1居中方法  (定位+margin)*/

            /* 向下移动父元素(.father )的一半 */
            top: 50%;
            /* 向上移动自身(.son)高度的一半  负值上*/
            margin-top: -100px;

            /* 向右移动父元素(.father )的一半 */
            left: 50%;
            /* 向左移动自身(.son)高度的一半 */
            margin-left: -100px;
        }
    </style>

原理：使用简单的父相子绝定位法，利用left和top控制子元素的左上角垂直水平居中。然后使用margin-top和margin-left进行盒子位置的回移。

缺陷: 上面的方法完美实现了小盒子在大盒子中间垂直水平居中，但是有一个缺陷是必须提前知道小盒子的宽高，如果不知晓则无法精准居中。而真实项目里元素样式很多时候数据源来自后台请求，所以拿不到元素的具体宽高。

效果如下

(2) 第2居中方法 (定位+transfrom)

1.html结构

/* 结构 */
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

2.css样式

<style> 
    
       .father {
            /* 相对定位 */
            position: relative;
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: pink;
        }
       .father .son {
            /* 绝对定位 */
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: skyblue;

         /* 第2居中方法   定位+transfrom 
            移动父元素宽度的一半,小盒子左边框居中 */
            left: 50%;

         /* 移动的父元素高一半,小盒子上边框居中 */
            top: 50%;
            transform: translate(-50%, -50%);  
        }

    </style>

效果如下

原理：跟第一种定位方法一样，先将左上角定位到大盒子中间位置。然后使用transform属性里面的translate方法，该方法表示平移自身元素的多少位置。translateX为平移横坐标，translateY平移纵坐标，translate则平移横纵坐标。参数一为横坐标，参数二为纵坐标。使用-50%表示向左向上平移自身一半位置，达到居中效果。

缺陷：因为使用了css3，所以有一点兼容问题，但是定位方案内还是最推荐此方法。

(3) 第3居中方法 (定位+方位名词0)

1.html结构

/* 结构 */
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

2.css样式

<style> 
    
       .father {
            /* 相对定位 */
            position: relative;
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: pink;
        }
       .father .son {
            /* 绝对定位 */
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: skyblue;

          /* 第3居中方法  (定位+方位名词0 )*/
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
         /* 这个技巧子元素必须设置宽高 */
         /* 外边距在标准流情况下,只能让盒子水平居中,无法垂直居中 */
         /* 盒子脱离标准流,绝对定位4个方向为0,即可让小盒子水平垂直居中 */
        }

    </style>

效果如下

原理：让小盒子四个方向的定位都为0，此时小盒子还位于原位，使用margin: auto让他上和下，左和右的外边距保持一致。由于小盒子四个方向的定位值都为0，所以会自动将小盒子拉到正中间，不会是右上角在正中间。

缺陷：上面的方法虽然可以不知道小盒子的宽高就进行居中显示，但是小盒子宽高必须存在。如果不设置宽高，会自动铺满全屏（绝对定位后，四个方位值为0的效果，不设置宽，则宽铺满，不设置高则高铺满，都不设置则宽高铺满）

(4) 第4居中方法 (flex布局)

1.html结构

/* 结构 */
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

2.css样式

<style> 
    
       .father {
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: pink;

            /* 第4居中方法  flex布局*/

           /* 弹性容器 */
            display: flex;
           /* 水平居中 */
            justify-content: center;
           /* 垂直居中 */
            align-items: center; 
        }
       .father .son {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>

效果如下

原理： flex的流动布局也是非常推荐的一种解决布局的方法，直接设置为flex流动布局，然后让大盒子内的元素位于x轴，y轴居中即可。

缺陷：好的东西总有相同的问题存在，那就是兼容问题（其实现在依旧可以不考虑兼容问题了）