CSS盒子居中的方法

电玩女神 2022-10-13 05:25 241阅读 0赞

# 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布局 ###

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