CSS行内元素和块级元素的水平居中，垂直居中，水平垂直居中实现

常用内联元素：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;