CSS 中父盒子里的内容水平、垂直居中的五种方法

发布于:2022-11-09 ⋅ 阅读:(15) ⋅ 点赞:(0) ⋅ 评论:(0)

目录

1、margin

2、定位+margin

2.1 、定位+margin(一)

2.2、定位+margin(二)

3、定位加位移

4、flex

5、八种经典写法总结:

5.1、第一种:

5.2、第二种:

5.3、第三种:

5.4、第四种:

5.5、第五种:

第六种:

第七种:

第八种:


1、margin

        注意:用margin来使子盒子居中,但是这种方法会有一定的缺陷需要给父盒子一个 overflow: hidden属性来清除塌陷,而且还需要精确计算上下的边距 如果父盒子改变大小,则还需重新计算大小。

<style>
    .father {
      width: 500px;
      height: 500px;
      background-color: pink;
      overflow: hidden;/*用来清除父盒子塌陷*/
    }
    .son {
      width: 200px;
      height: 200px;
      margin: 150px auto;
      background-color: purple;
    } 
 
  </style>
 
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>


2、定位+margin

2.1 、定位+margin(一)

        使用定位加外边距的方法来使子盒子居中,但是这种方法也会有一定的缺陷如果盒子大小需要更改 同时需要更改外边距来让子盒子从新居中。

   /*
      通过定位父盒子上和左各50% 然后再用外边距让盒子往上走自己宽高的一半 
      缺点:如果盒子大小需要更改 同时需要更改外边距来让子盒子从新居中
     */

<style>
 .father {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: relative;
    }

  .son {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
      background-color: purple;
    }
  </style>
 
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>


2.2、定位+margin(二)

        使用定位加外边距的方法来使子盒子居中,这样虽然不会出现两个盒子更改了宽高 而不居中问题 但需要将子盒子中的上下左右的距离全部设置一遍,比较麻烦
      通过对盒子定位 让其在父盒子中上下左右距离都为0 再通过margin=0的方法让其实现居中
      这样不会出现子盒子更改了宽高 而不居中问题 但需要将上下左右的距离全部设置一遍,比较麻烦

<style>
 .father {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: relative;
    }

    .son {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background-color: purple;
    }
  </style>
 
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>


3、定位加位移

        使用定位加位移的方法来使子盒子居中,这样既不会出现更改盒子宽高之后就不会居中的问题,而且相对于第三种方法来说代码量也少
      跟第上边第一种相似,也是通过对其定位的父盒子上和左各50% 
      然后使用transform属性来沿X轴与Y轴平移自己本身宽高的一半来设置
      这样既不会出现更改盒子宽高之后就不会居中的问题,也减少了代码量。

<style>
 .father {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: relative;
    }
    .son {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: purple;
    }
  </style>
 
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>


4、flex


沿主轴和侧轴全部居中

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
 
    .father {
      width: 300px;
      height: 300px;
      background-color: pink;
      display: flex;
      /* 主轴对齐水平 */
      justify-content: center; 
      /* justify-content: space-around; */
      /* justify-content: space-evenly; */
 
      /* 侧轴居中对齐 */
      align-items: center;
 
    }
 
    .son {
      width: 100px;
      height: 100px;
      background-color: purple;
    }
  </style>
</head>
 
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

5、八种经典写法总结:

5.1、第一种:


水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效

margin: 0 auto;

5.2、第二种:


水平居中,子父元素宽度固定,父元素设置 text-align: center; 
子元素设置 display: inline-block; 子元素不能设置浮动,否则居中失效。 
如果将元素设置为 inline , 则元素的宽高设置会失效,这就需要内容来撑起盒子

 #div2 {
            text-align: center;
        }
        #div2 p{
            margin: 0;
            display: inline-block;
        }  


5.3、第三种:


子绝父相,子盒子绝对定位,父盒子相对定位
水平垂直居中,子元素相对于父元素绝对定位, 
子元素top,left设置为50%,子元素margin的top,left减去自身高,宽的一半

        #div3 {
            position: relative;
        }
        #div3 p {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;

}

5.4、第四种:


水平垂直居中,子元素相对于父元素绝对定位, 
将子元素的top,right,bottom,left均设为0,然后设置子元素 margin: auto;

       #div4{
           position: relative;
        }
        #div4 p{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

5.5、第五种:


水平垂直居中,父元素设置 display: table-cell; vertical-align: middle; 
子元素设置 margin: auto; 
这种方式是让所有的子元素作为一个整体垂直居中,并不能单独指定某一个子元素居中

        #div5{
            display: table-cell;
            vertical-align: middle;
        }
        #div5 p{
            margin: auto;
        }

5.6、第六种:


水平垂直居中,子元素相对定位,top,let设为50%,transform: translate(-50%, -50%); 
这种方式并不会释放子元素在文档中所占的位置。
     

  #div6{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        #div6 p {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

5.7、第七种:


水平垂直居中,子元素相对于父元素绝对定位, 
子元素top,let设为50%,transform: translate(-50%, -50%); 
这种方式会释放子元素在文档中所占的位置

5.8、第八种:


        水平垂直居中,父元素设置 display: flex; justify-content: center; align-items: center; 
justify-content: center; 是让所有的子元素作为一个整体居中。

       #div8{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #div8 p{
            margin: 0;
        }