水平居中
1.对于行内元素，给父元素设置text-align: center;便可让行内元素水平居中。
.box {
text-align: center;
}
2.对于固定宽度的块级元素，给该元素设置margin: 0 auto;便可让块级元素水平居中。
.box {
width:80px;
margin: 0 auto;
}
3.对于不定宽度的块级元素，将子元素设置为inline-block,再设置父元素text-align:center即可
.container {
text-align: center;
}
.box {
display:inline-block;
}
4.利用css3中的flexbox布局让元素水平居中。
.box {
display: flex;
justify-content: center;
}
垂直居中
1.对于行内元素，设置line-height和height一致即可垂直居中。
.box {
height: 40px;
line-height: 40px;
}
2.对于不定高度的块级元素，设置父元素display:table;子元素使用css2 table布局让元素垂直居中。
.box {
display: table-cell;
vertical-align: middle;
}
3.对于固定高度的块级元素，设置父元素position: relative子元素使用绝对定位实现垂直居中。
.box {
position: absolute;
width: 500px;
height: 500px;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
}
4.利用css3中的flexbox布局让元素垂直居中。
.box {
display: flex;
align-items: center;
}
水平居中+垂直居中
1.flex布局可实现垂直水平居中
display: flex;
align-items: center;
justify-content: center;
2.宽高固定
.container {
position: relative;
width:100%;
height:500px;
}
.item {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}
3.宽高不固定
.container {
width:100%;
height:500px;
display:table;
text-align: center;
}
.item {
display: table-cell;
vercial-align: middle;
}
