标签的水平垂直居中，在面试及日常项目中非常常见，常用的4种方法如下：
方案一：已知标签宽高，标签绝对定位，4个方向的值均为0，并设置margin: auto;注意：IE7及之前版本不支持；
方案二:已知标签宽高，使用负margin值，其值为标签宽度的负一半；
方案三：标签绝对定位，left与top值设置为50%，并做transform偏移-50%，-50%
方案四：父级转变为弹性盒子，主轴交叉轴居中对齐；
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标签水平垂直居中</title>
<style type="text/css">
.container {
width: 880px;
}
.wrapper {
margin: 10px;
float: left;
width: 200px;
height: 200px;
background: blue;
border-radius: 10px;
}
.center {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: red;
border-radius: 5px;
}
/*方案一：已知标签宽高，标签绝对定位，4个方向的值均为0，并设置margin: auto;注意：IE7及之前版本不支持*/
.wrapper1 {
position: relative;
}
.center1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*方案二:已知标签宽高，使用负margin值，其值为标签宽度的负一半*/
.wrapper2 {
position: relative;
}
.center2 {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
/*方案三：标签绝对定位，left与top值设置为50%，并做transform偏移-50%，-50%*/
.wrapper3 {
position: relative;
}
.center3 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*方案四：父级转变为弹性盒子，主轴交叉轴居中对齐*/
.wrapper4 {
/*父级转变为弹性盒子*/
display: flex;
/*项目在主轴上的居中对齐*/
justify-content: center;
/*项目在交叉轴上居中对齐。*/
align-items: center;
}
.center4 {}
.des {
text-indent: 2rem;
font-size: 18px;
word-spacing: 2px;
box-sizing: border-box;
padding: 20px 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper wrapper1">
<div class="center center1">
方案一
</div>
</div>
<div class="wrapper wrapper2">
<div class="center center2">
方案二
</div>
</div>
<div class="wrapper wrapper3">
<div class="center center3">
方案三
</div>
</div>
<div class="wrapper wrapper4">
<div class="center center4">
方案四
</div>
</div>
<div class="wrapper des">
方案一：已知标签宽高，标签绝对定位，4个方向的值均为0，并设置margin: auto;注意：IE7及之前版本不支持
</div>
<div class="wrapper des">
方案二:已知标签宽高，使用负margin值，其值为标签宽度的负一半
</div>
<div class="wrapper des">
方案三：标签绝对定位，left与top值设置为50%，并做transform偏移-50%，-50%
</div>
<div class="wrapper des">
方案四：父级转变为弹性盒子，主轴交叉轴居中对齐
</div>
</div>
</body>
</html>效果图如下：
标签水平居中对齐
