1.flex布局实现盒子居中:

将父盒子设为弹性容器,并使用主轴居中属性和侧轴居中属性。

公共结构代码:

<body>
  <div class="demo">
    <div class="box"></div>
  </div>
</body>

 代码示例:

  <style>
    .demo{
      width: 500px;
      height: 500px;
      background-color: #f00;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: #0f0;
    }    
  </style>

2.定位+位移实现盒子居中:

使用定位(父盒子相对定位,子盒子绝对定位)移动父盒子的宽高各一半,再使用位移往回移动子盒子自身的一半。

代码示例:

<style>
    .demo{
      width: 500px;
      height: 500px;
      background-color: #f00;
      position: relative;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: #0f0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }   
  </style>

3.定位+外边距实现盒子居中:

使用定位(父盒子相对定位,子盒子绝对定位)移动父盒子的一半,再使用外边距移动子盒子的一半。但这种方法的缺点是盒子的大小必须是固定的。

代码示例:

<style>
    .demo{
      width: 500px;
      height: 500px;
      background-color: #f00;
      position: relative;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: #0f0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
    } 
  </style>

4.定位+外边距为auto实现盒子居中:

使用定位(父盒子相对定位,子盒子绝对定位)将四个方位名词的值都设为0,margin的值设为auto。

代码示例:

<style>
    .demo{
      width: 500px;
      height: 500px;
      background-color: #f00;
      position: relative;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: #0f0;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;      
    } 
  </style>

使用频率:前两种方法使用最多(前端开发必会),第三种有致命缺点基本不使用,第四种属于拓展知识范围正经开发不会使用。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐