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;}