css让元素在父元素中呈现水平垂直居中的形态有两种情况：
1.单行的文本、行内（inline）元素、行内块(inline-block)元素;
2.不固定宽高的块级盒子；
3.固定宽度的块级盒子；
单行的文本、行内（inline）元素、行内块(inline-block)元素：
1.水平居中，此类元素需要水平居中，则父级元素必须是块级元素，且父级元素需要设置样式：
.parent {
text-align: center;
}
2.垂直居中有两种方式：
2.1通过设置上下内间距达到垂直居中的效果；
.single-line {
padding-top: 30px; padding-bottom: 30px;
}
2.2通过设置height和lint-height 一致达到垂直居中；
.single-line {
height: 100px; line-height: 100px;
}
固定宽高的块级盒子
1.absolute + 负margin js.jirengu.com/vuzucobuhi/…
.parent {
width: 400px;
height:500px;
border: 1px solid #FFB366;
position:relative;
}
.child1 {
border: 1px solid #79e679;
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin:-50px 0 0 -50px;
}
2.absolute + margin auto js.jirengu.com/bowuwiquye/…
.parent {
width: 400px;
height:500px;
border: 1px solid #FFB366;
position:relative;
}
.child {
border: 1px solid #79e679;
width:100px;
height:100px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
text-align: center;
line-height: 100px;
}
方法三：absolute + calc js.jirengu.com/quwasuvimo/…
.parent {
width: 400px;
height:500px;
border: 1px solid #FFB366;
position:relative;
}
.child {
border: 1px solid #79e679;
width:100px;
height:100px;
position:absolute;
left:calc(50% - 50px);
top: calc(50% - 50px);
text-align: center;
line-height: 100px;
}
不固定宽高的块级盒子
方法一：absolute + transform js.jirengu.com/lofoqisepo/…
.parent {
width: 400px;
height:500px;
border: 1px solid #FFB366;
position:relative;
}
.child {
border: 1px solid #79e679;
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
text-align: center;
line-height: 100px;
}
方法二：line-height + vertical-align js.jirengu.com/sayicizoja/…
.parent {
line-height: 200px;
border: 1px solid #FFB366;
text-align: center;
}
.child {
border: 1px solid #79e679;
display:inline-block;
line-height: initial;//水平方向居中
vertical-align:middle;//垂直方向居中
}
方法三：table-cell js.jirengu.com/jolodahuje/…
.parent {
width: 400px;
height:400px;
border: 1px solid #FFB366;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.child {
border: 1px solid #79e679;
display: inline-block;
}
方法四：flex js.jirengu.com/xipelohonu/…
.parent {
width: 400px;
height:400px;
border: 1px solid #FFB366;
display:flex;
justify-content:center;
align-items:center;
}
.child {
border: 1px solid #79e679;
}
