超全面的CSS居中方法总结

矫情吗；* 2022-12-27 02:18 129阅读 0赞

# 超全面的CSS居中方法总结： #

## 行内元素 ##

<div class="parent">
          <span class="child">content</span>
    </div>

### 水平居中 ###

方法一：

.parent{ 
        background-color: red;
        text-align: center; // 只针对于行内块元素有效果
    }

方法二：

.parent { 
         background-color: red;
         /* 父元素的宽度就会适用子元素的宽度,然后margin: auto */
         width: fit-content;
         margin: auto;
     }

### 垂直居中 ###

.parent { 
        background-color: red;
        height: 200px;
        line-height: 200px;
    }

## 块级元素 ##

<div class="parent">
            <div class="child">content</div>
        </div>

### 水平居中 ###

.parent { 
        background-color: red;
    }
    .child{ 
        width: 100px;
        background-color: blue;
        color: #ffffff;
        margin: auto;
    }

### 水平垂直居中(重点) ###

方法一：定位

.parent { 
        position: relative;
        height: 200px;
        background-color: red;
    }
    
    .child { 
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px; // 元素宽度的一半
        margin-top: -50px; // 元素高度的一半
        width: 100px;
        height: 100px;
        background-color: blue;
    }

方法二：计算方法calc

.parent { 
        position: relative;
        height: 200px;
        background-color: red;
    }
    
    .child { 
        position: absolute;
        left: calc(50% - 50px); // 元素宽度的一半
        top: calc(50% - 50px); // 元素高度的一半
        width: 100px;
        height: 100px;
        background-color: blue;
    }

方法三：定位 + transform

.parent { 
        position: relative;
        height: 200px;
        background-color: red;
    }
    
    .child { 
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: orange;
    }

方法四：定位 + margin

> 设置left/right/top/bottom为0后，子元素填充父元素的所有可用空间，然后margin： auto，就实现了垂直居中效果

.parent { 
        position: relative;
        height: 200px;
        background-color: red;
    }
    
    .child { 
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: orange;
    }

方法五：padding方法

> 因为父元素没有高度，子元素沾满父元素的空间；然后父元素设置padding值

.parent { 
        padding: 20px;
        background-color: red;
    }
    
    .child { 
        height: 200px;
        background-color: orange;
    }

方法六：flex布局

.parent { 
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        background-color: red;
    }
    
    .child { 
        width: 100px;
        height: 100px;
        background-color: orange;
    }

方法七：伪元素

.parent { 
        height: 200px;
        background-color: red;
        text-align: center;
    }
    
    /* before伪元素默认是行内元素 */
    .parent::before { 
        content: "";
        /* width: 20px; */
        height: 200px;
        display: inline-block;
        vertical-align: middle;
    }
    
    .child { 
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: orange;
        vertical-align: middle;
    }

方法八：calc函数

.parent { 
        width: 600px;
        height: 600px;
        background-color: red;
    }
    
    .child { 
        width: 100px;
        height: 100px;
        padding: calc((100% - 100px)/2);
        /* 让背景颜色只对content生效，而不对padding生效 */
        background-clip: content-box;
        background-color: orange;
    }