1.margin居中

margin: 0 auto; 上下0，左右自适应

文本居中方式： text-align: center;

有height高度的居中方式：line-height: 100px;

2.flex弹性盒居中

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

3.定位居中方法

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

2.calc：需要子元素定义宽高。

.Parent {position: relative;}.text{position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);/* 需要text元素的宽高 */}

4.伪类居中方法

给该元素添加伪类（::before或者::after）

.text::after {content: '';height: 100%;display: inline-block; vertical-align: middle;}

5.display设置居中

给父元素设置display:table，然后给需要文字垂直居中的元素设置display: table-cell;vertical-align: middle.

#item {display: table;}.text {display: table-cell;vertical-align: middle;}