CSS-常见盒子居中方式

盒子居中方式

水平居中

块元素如果不指定宽度，其宽度将同父元素的宽度相同，默认情况下为浏览器屏幕的宽度；

• 盒子宽度已知

利用外边距即可让盒子水平居中

.box {
    width: 300px;
    margin: 0 auto;
}

• 盒子宽度未知

利用绝对定位+transform即可让盒子居中

父盒子需要设置未相对定位，如果不设置，则相对浏览器的屏幕宽度和高度进行定位；

.box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

垂直居中

块元素如果不指定高度，其高将为0，因此垂直居中的前提条件是父盒子需要有高度

块级元素设置宽度后仍占据一行空间，因此margin:auto;会将这一行的剩余空间平均分配给左右外边距。

margin:auto 能使块级元素水平居中，但是不能垂直居中，因为垂直方向上默认没有剩余的空间。

行内元素margin:auto既不能水平居中也不能垂直居中，因为行内元素水平垂直方向上默认都没有剩余的空间。

• 盒子高度已知

利用绝对定位+边距进行垂直居中，宽度已知即可水平居中，高度已知即可垂直居中；

right：定义了定位元素右外边距边界与其包含块右边界之间的偏移。

定位后设置上下左右都为0，意味着子盒子占据父元素的四条边，即父元素被子元素完全占据，最终子元素将以左上角（即top、left）进行定位，并且占据父元素的剩余空间， margin：auto就会平分剩余空间；

.father {
    height: 300px;
    position: relative;
}

.box {
    width: 300px;
    height: 50px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

• 盒子高度未知

利用绝对定位 + transform，transform回滚元素的宽度和高度；

.father {
    height: 300px;
    position: relative;
}

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

利用flex布局

.father {
    justify-content: center; /*子元素水平居中*/
    align-items: center; /*子元素垂直居中*/
    display: flex;
}