第一种方法:line-height 设置为等于其元素的高度height,弊端就是必须要确定它的元素高度
.test {
width: 200px;
height: 100px;
border: 1px solid blue;
//第一种
line-height: 100px;
}
第二种方法:第二种 table-cell 加 middle组合
.test {
width: 200px;
height: 100px;
border: 1px solid blue;
//第二种 table-cell 加 middle组合
display: table-cell;
vertical-align: middle;
}
第三种方法:
.test {
width: 200px;
height: 100px;
border: 1px solid blue;
//第三种 flex加center
display: flex;
align-items: center;
}
效果:
<div class="test">1234</div>