css居中

1.水平居中

（1）块级元素

margin: 0 auto

（2）文本

text-align:center

2.垂直居中

（1）块级元素

        a.定位

//父级元素设置postion:relative
//子级
postion: absolute
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;

         b.定位

//父级 position: relative
//子级
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

        c.flex布局

//父级
display: flex;
align-items: center;
justify-content: center;
height: 100px;
//子级垂直居中

（2）文本

        a.块级元素

//height和line-height相等
height: 50px;
line-height: 50px;
text-align: center;

        b.图片基于文字

//给图片设置
vertical-align: middle;