超全面的CSS居中方法总结

超全面的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;
}