css子盒子居中的方法

原创已于 2022-03-29 00:23:37 修改 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #前端 #前端框架

于 2022-03-27 00:14:47 首次发布

本文介绍了三种常见的CSS方法来实现子元素的居中布局：利用定位和margin: auto，通过transform配合定位，以及使用display: flex实现弹性居中。这些技巧在前端开发中非常实用。

使一个盒子居中有很多种方法，下面是几种比较常用、简单的:

第一种

利用定位和 margin: auto;

<!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>盒子居中第一种</title>

  <style>

    /* 清楚默认样式 */

    * {

      margin: 0;

      bottom: 0;

    }



    .father {

      /* 给父盒子设置相对定位,子绝父相 */

      position: relative;

      width: 500px;

      height: 500px;

      background-color: pink;

    }



    .son {

      /* 给子盒子设定绝对定位,并上下左右都设置为0,再给margin:auto; */

      position: absolute;

      top: 0px;

      right: 0px;

      bottom: 0px;

      left: 0px;

      margin: auto;

      width: 200px;

      height: 200px;

      background-color: green;

    }

  </style>

</head>



<body>

  <div class="father">

    <div class="son"></div>

  </div>

</body>



</html>

第二种

利用定位和transform达到子盒子居中

<!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>盒子居中第二种</title>
  <style>
    /* 清楚默认样式 */
    * {
      margin: 0;
      bottom: 0;
    }

    .father {
      /* 给父盒子设置相对定位,子绝父相 */
      position: relative;
      width: 500px;
      height: 500px;
      background-color: pink;
    }

    .son {
      /* 给子盒子设定绝对定位, */
      position: absolute;
      /* 子盒子移动父盒子50%的距离 */
      top: 50%;
      left: 50%;
      /* 再利用transform反向移动自身50%的距离,从而达到居中 */
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

第三种

利用margin和transform让子盒子居中

<!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>盒子居中第三种</title>
  <style>
    /* 清楚默认样式 */
    * {
      margin: 0;
      bottom: 0;
    }

    .father {
      width: 500px;
      height: 500px;
      background-color: pink;
      /* 给父元素清除塌陷 */
      overflow: hidden;
    }

    .son {
      /* 左边距和上边距移动父盒子的50% */
      margin-top: 50%;
      margin-left: 50%;
      /* 再利用transform反向移动自身50%的距离,从而达到居中 */
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

第三种

通过给父盒子添加display: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>盒子居中第三种</title>
  <style>
    /* 清楚默认样式 */
    * {
      margin: 0;
      bottom: 0;
    }

    .father {
      width: 500px;
      height: 500px;
      background-color: pink;
      /* 使父盒子变成弹性容器,子盒子变成弹性盒子 */
      display: flex;
      /* 控制子盒子主轴居中 */
      justify-content: center;
      /* 控制子盒子侧轴居中 */
      align-items: center;

    }

    .son {
      width: 200px;
      height: 200px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>