一、水平居中
- 文本、图片等行内元素的水平居中：text-align:center;
- 宽度确定的块级元素的水平居中：margin-left:auto,margin-right:auto;
- 宽度不确定块级元素的水平居中：
- 可以利用table元素的特性【它本身不是块级元素，如果不给它设置宽度的话，他的宽度将由内部元素撑起】，将该元素包裹在table标签中，再对table设置margin-left/right:auto即可实现水平居中。
- 可以将该块级元素display：inline，再设置其父元素text-align：center;
- 分别给该元素及其父元素设置定位：然后再利用百分比来控制其位置达到居中效果。
给父元素设置float、position：relative，left：50%，子元素position：relative，left：-50%
二、垂直居中
1、父元素高度不确定的文本、图片、块级元素的垂直居中：给父元素设置上下相同的内边距。
2、父元素高度确定的单行文本的垂直居中：给父元素的height和子元素设置相同的line-height值。（这里的height设置不是必须的）详情参考：
3、父元素高度确定的多行文本、图片、块级元素的垂直居中：
vertical-align：middle；（支队父元素是th、tr有效）
.display：table-cell，vertical-align：middle；
水平垂直居中
<div class="pparent">
<div class="child"></div>
</div>
方式一：
.parent{
position:relative;
}
.child{
width:100px;
height:100px;
position:absolute;
top:50%;//父元素的50%
left:50%;
trsform:translate(-50%,-50%);//自身的50% 2d转化
}
方式二：
.parent{
position:relative;
}
.child{
width:100px;
height:100px;
position:absolute;
top:50%;//父元素的50%
left:50%;
margin:-50px 0 0 -50px;
}
方式三：
.parent{
position:relative;
}
.child{
width:100px;
height:100px;
position:absolute;
top:0；
left:0；
right:0;
bottom:0;
margin:auto;
}
方式四：flex布局
.parent{
display:flex;
justify-content:center;
align-items: center;
}
