HTML结构
<div class="wrap">
<div class="center">我要居中</div>
</div>
方法一：绝对定位+margin：auto;
.wrap{
position:relative;
250px;
height:150px;
background: pink;
overflow: hidden;
}
.center{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
/*一定要有宽高*/
70px;
height:50px;
color:#fff;
background: deepskyblue;
margin:auto;
}
方法二：grid布局+justify-content、align-items
.wrap{
250px;
height:150px;
background: pink;
display: grid;
justify-content: center;
align-items: center;
}
.center{
color:#fff;
background:deepskyblue;
}
方法三：grid布局+margin
.wrap{
250px;
height:150px;
background:pink;
display: grid;
}
.center{
color:#fff;
background: deepskyblue;
margin:auto;
}
方法四：grid布局+justify-items、align-items
.wrap{
250px;
height:150px;
background:pink;
display: grid;
justify-items: center;
align-items: center;
}
.center{
color:#fff;
background:deepskyblue;
}
方法五：flex布局+justfiy-content、align-items
.wrap{
250px;
height:150px;
background:pink;
display: flex;
justify-content:center;
align-items: center;
}
.center{
color:#fff;
background:deepskyblue;
}
方法六：flex布局+margin
.wrap{
250px;
height:150px;
background:pink;
display: flex;
}
.center{
color:#fff;
background:deepskyblue;
margin:auto;
}
方法七：table-cell布局
.wrap{
250px;
height:150px;
background:pink;
display: table-cell;
vertical-align:middle;/*垂直居中*/
text-align: center;/*水平居中*/
}
.center{
color:#fff;
background:deepskyblue;
display: inline-block;
}
方法八：绝对定位+transform
.wrap{
position:relative;
250px;
height:150px;
background:pink;
}
.center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
background:deepskyblue;
}
方法九：伪元素+line-height;
.wrap{
250px;
height:150px;
background:pink;
text-align: center;
}
.wrap::after{
content:"";
line-height: 150px;
}
.center{
color:#fff;
background: deepskyblue;
display: inline-block;
}