点击上方蓝色字体，选择“标星公众号”

优质文章，第一时间送达

作者 | Du9191

来源 | urlify.cn/UnUJv2

水平居中：

（1）内联元素：

text-align: center;

利用 text-align: center ；可以实现在块级元素内部的内联元素水平居中。

如果一行中有多个块级元素，可以通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

注意：此方法对内联(inline), 内联块(inline-block),内联表(inline-table), 内联块级弹性盒(inline-flex)元素水平居中都有效。

（2）块级元素：

margin: 0 auto；

注意：当块级元素的宽度固定时，可通过margin: 0 auto；使块级元素水平居中。（未定宽度，居中无效）

（3）绝对定位+2D平移：

position: absolute；

left:50%；

transform: translateX(-50%)；

注意：当块级元素的宽度不固定时，可通过绝对定位配合2D平移（平移相对于自身宽高的百分比），使块级元素水平居中。

（4）弹性盒子使用justify-content属性：

display: flex；

justify-content: center；

注意：需将父盒子设置为弹性盒子，利用justify-content 属性（用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式）实现水平居中。

垂直居中：

（1）内联元素：

vertical-align:middle;

vertical-align是用来指定内联元素或者表格单元格元素的垂直对齐方式。

可被用于：使内联元素盒模型与其内联元素容器垂直对齐。用于垂直对齐一行文本的内的图片，垂直对齐表格单元内容。

注意：使用vertical-align要清楚基线、边界的概念

vertical-align只对内联元素（inline、inline-block、inline-table）、表格单元格元素（table-cell）生效。不能用它垂直对齐块级元素。

（2）行高与高度一致：

line-height: **px;

height: **px;

内联元素的高度(height)和行高(line-height)相等时，元素垂直居中。

（3）块级元素：

position: absolute;

top: 50%;

height: 100px;

margin-top: -50px;

注意：当块级元素的高度固定时，通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，使块级元素垂直居中。

（4）绝对定位+2D平移：

position: absolute;

top: 50%;

transform: translateY(-50%)；

注意：当块级元素的高度不固定时，可通过绝对定位配合2D平移（平移相对于自身宽高的百分比），使块级元素垂直居中。部分浏览器存在兼容性的问题。

（5）弹性盒子使用 align-items属性：

display: flex；

align-items: center；

注意：需将父盒子设置为弹性盒子，利用align-items 属性（用于设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式）实现垂直居中。

（6）利用表布局（table）

display:table；

display:table-cell；

注意：父容器设为display:table让他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，

然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中。（常规的登录及注册页面都需要用到）

（7）精灵元素(ghost element)技术

.ghost-center {
    position: relative;
}
.ghost-center::before {
    content: " ";
    display: inline-block;

    height: 100%;

    width: 1%;

    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;

    vertical-align: middle;

    width: 20rem;
}

在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。个人认为本质就是第（1）种方法。

水平垂直居中：

（1）固定宽高

.parent {
    position: relative;
}

.child {
    position: absolute;

    top: 50%;

    left: 50%;

    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
}

（2）不定宽高

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);
}

（3）利用flex布局

.parent {
    display: flex;

    justify-content: center;

    align-items: center;
}

（4）利用grid布局（兼容性较差，不推荐）

.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}

（5）利用表布局（table）

.outer {
    display: table;
    position: absolute;

    height: 100%;

    width: 100%;
}

.middle {
    display: table-cell;

    vertical-align: middle;
}

.inner {
    margin-left: auto;

    margin-right: auto; 

    width: 400px;
}

粉丝福利：Java从入门到入土学习路线图

👇👇👇

👆长按上方微信二维码 2 秒

感谢点赞支持下哈

前端基础问题：CSS居中的几种方式

水平居中：