CSS盒子居中的方法

CSS盒子居中的方法

1. CSS盒子水平居中的方法

1.1 使用 margin: 0 auto;

当元素的左右外边距（margin）相等的时候，元素就处在中间位置，这可以通过将左右外边距都设为auto来实现。如果是块级元素通常还需要定义宽度。如下所示：

section {
    width: 400px;
    margin: 0 auto;
}

注意，如果把上下外边距设为auto，并不能实现垂直居中，因为这时候auto相当于0.

1.2 把盒子转成 行内块，然后用 text-align 属性使盒子水平居中

改变需要居中元素的盒类型，调整为行内块(inline-block)，在父元素中将text-align属性设为center，就能实现水平居中。

.father {
    width: 500px;
    height: 500px;
    margin: 50px auto;
    text-align: center;               // 让父盒子设置水平居中
}
.son {
    width: 200px;
    height: 200px;
    display: inline-block;            // 让子盒子显示为行内块模式
}

1.3 子绝父相 + margin负值

父盒子采用相对定位，子盒子采用绝对定位，先让盒子左右边缘和父盒子垂直的中心线垂直（left：50%），然后把子盒子往回移动自身宽度的一半

可以有两种方法实现反向偏移一半的效果：

• margin-left：

  father {
      width: 500px;
      height: 500px;
      position: relative;
  
  }
  .son {
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;                       // 向右移动父盒子一半
      margin-left: -100px;             // 向左移动自身盒子一半
  

• transform：translateX(-50%)

  father {
      width: 500px;
      height: 500px;
      position: relative;
  
  }
  .son {
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;                       // 向右移动父盒子一半
      transform: translateX(-50%);     //向左移动自身盒子一半
  

1.4 flex布局

这是CSS3引入的新功能，当普通容器被调整为伸缩容器后，如果要让里面的元素水平居中，那么就相当于主轴的居中对齐,（子盒子有或没有宽高的时候都适用）

.father {
    display: flex;
    justify-content: center;
}

但是目前IE的多个版本还不支持此功能

2. CSS盒子垂直居中的方法

2.1 行高：line-height：height

只有当容器的高度已知并且是单行文本时，才能用行高实现垂直居中

<div style="height: 100px; line-height:100px">
    <p>单行文本垂直居中</p>
</div>

注意：如果将单行文本改为图像，用行高则不能实现图像的水平居中

2.2 利用table的特征

该方法将普通元素调整为表格元素，然后利用vertical-align属性就能让内容居中对齐

.allCenter{
	display:table-cell;//设置为表格单元
	vertical-align：middle;//设置表格属性，此时垂直居中了
	text-align：center；//此时没有用的，子元素此时为块元素，，不是行内元素，text-align无效，需要对子元素进行处理称为行内块元素
}
.allCenterChild{
   display： inline-block;//子元素变为行内块元素，加上父元素的text-align属性，此时水平居中了
}

虽然模拟表格能带来很多便捷，但同时也受到了限制。例如跳针过的元素不能用定位和浮动；使用盒类型table-cell的时候，必须同时有个祖先元素的盒类型是table；变为表格的元素，它的默认宽度将不再占一行，因为表格本质上是行内元素

2.3 子绝父相 + margin负值

与水平居中的方法类似，父盒子采用相对定位，子盒子采用绝对定位，先让盒子上下边缘和父盒子垂直的中心线垂直（top：50%），然后把子盒子往上移动自身宽度的一半

可以有两种方法实现反向偏移一半的效果：

• margin-top：

  father {
      width: 500px;
      height: 500px;
      position: relative;
  }
  .son {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 50%;                       // 向下移动父盒子一半
      margin-top: -100px;             // 向上移动自身盒子一半
  

• transform：translateY(-50%)

  father {
      width: 500px;
      height: 500px;
      position: relative;
  
  }
  .son {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 50%;                       // 向下移动父盒子一半
      transform: translateY(-50%);     //向上移动自身盒子一半
  

2.4 flex布局

父级对子元素进行垂直居中，居中属性只需要定义在父元素中，相当侧轴的居中对齐

<style>
    .wrap{  //【基础设置】父元素：宽高各600px
    width: 600px;
    height: 600px;
    }
    .item{  //【基础设置】子元素:宽高各150px
       width：150px;
       height:150px;
    }
    .allCenter{    
        display:flex;//设置弹性布局，display属性选为flex
        align-items:center;//让子元素垂直居中
    }
    .allCenterChild{//父元素不受影响
    }
</style>