常用内联元素：a,img,input,lable,select,span,textarea,font
常用的块级元素：div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol,ul,li
一、水平居中
行内元素居中：
text-align:center
图片，单个块级元素居中：margin-left和margin-right设成auto
margin: 0 auto
或者
display:block
margin：0 auto
多块级元素水平居中
父元素：text-align: center
子元素：display: inline-block;
块级元素中的行内元素居中：
块级：text-align:center
行内：display:inline-block
弹性布局(flex)，实现水平居中
父元素：
display: flex
justify-content: center
align-items:flex-end
块级元素水平居中：
父元素：
position: relative；
子元素：
position: absolute;
left: 50%;
margin-left: -333px;（元素的宽）
或者
transform来向左向上便宜半个内元素的宽
transform: translateX(-50%);
二，垂直居中
单行行内元素垂直居中：
height：40px
line-heigth:40px
多行元素垂直居中
1111111 .center { display: table; width: 100%; } .center_text { display: table-cell; text-align: center; vertical-align: middle; }
flex布局实现垂直居中
父元素：
display: flex;
flex-direction: column;
justify-content: center;
块级元素垂直居中：
父元素：
position: relative;
子元素：
position: absolute;
top: 50%;
transform: translateY(-50%);
三，水平垂直居中：
块级元素水平垂直居中：
父元素：
position: relative；
子元素：
position: absolute;
top: 50%;
left: 50%;
margin-left: -333px;（元素的宽）
margin-top: -200px;（元素的高）
或者
transform来向左向上便宜半个内元素的宽和高
transform: translate(-50%, -50%);
图片：
.img_wrap{
width:400px;
height:300px;
line-height:300px;
text-align: center;
}
.img_wrap img{
vertical-align:middle;
}
flex布局
父元素：
display: flex;
justify-content: center;
align-items: center;
