第一种：通过 position translateY
a：水平及垂直同时居中
.wrapper {
position: relative;
width: 300px;
height: 300px;
border: solid 2px red;
border-radius: 5px;
}
.wrapper .content{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
height: 100px;
width: 100px;
border: solid 2px blue;
border-radius: 5px;
}
b：水平居中
.wrapper {
position: relative;
width: 300px;
height: 300px;
border: solid 2px red;
border-radius: 5px;
}
.wrapper .content{
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100px;
width: 100px;
border: solid 2px blue;
border-radius: 5px;
}
c：垂直居中
.wrapper {
position: relative;
width: 300px;
height: 300px;
border: solid 2px red;
border-radius: 5px;
}
.wrapper .content{
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 100px;
width: 100px;
border: solid 2px blue;
border-radius: 5px;
}
第二种：通过 position margin
a：水平及垂直同时居中
.wrapper {
position: relative;
width: 300px;
height: 300px;
border: solid 2px red;
border-radius: 5px;
}
.wrapper .content{
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
height: 100px;
width: 100px;
border: solid 2px blue;
border-radius: 5px;
}
b：水平居中
1 .wrapper {
2 position: relative;
3 width: 300px;
4 height: 300px;
5 border: solid 2px red;
6 border-radius: 5px;
7 }
8
9 .wrapper .content{
10 position: absolute;
11 left: 50%;12 margin-left: -50px;
13 height: 100px;
14 width: 100px;
15 border: solid 2px blue;
16 border-radius: 5px;
17 }
c：垂直居中
.wrapper {
position: relative;
width: 300px;
height: 300px;
border: solid 2px red;
border-radius: 5px;
}
.wrapper .content{
position: absolute;
top: 50%;
margin-top: -50px;
height: 100px;
width: 100px;
border: solid 2px blue;
border-radius: 5px;
}二、元素内部信息
第一种：元素内容没有标签，只有内容，这样垂直设置height和line-height一样就可以了，水平设置text-align:center就可以
.wrapper{
height: 50px;
line-height: 50px;
text-align: center;
}
第二种：元素内部元素居中，设置如下：
.wrapper-table{
display: table-cell;
height: 100px;
width: 100px;
vertical-align: middle;
text-align: center;
border: solid 2px yellow;
}
.wrapper-table .wrapper-table-cell{
border: solid 2px #009900;
},
