水平垂直居中

转自：http://blog.csdn.net/u012657197/article/details/73558168

假设父元素的id为parent，子元素的id为child，前提是父元素和子元素已经设置了宽高。
（1）flex
#parent{
display: flex;
justify-content: center;
align-items: center;-
}
（2）flex+ margin
#parent{
display: flex;
}
#child{
margin: auto;
}
（3）inline-block(行内的水平垂直居中)
#parent{
text-align: center;
}
#child{
display: inline-block;
vertical-align: middle
}
（4）margin+ relative
#parent{
position: relative;
}
#child{
position: absolute;
top:0;
bottom:0;
right:0;
left:0
margin: auto;
}
（5）transform
#parent{
position: relative;
}
#child{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}