前言
在CSS中，设置元素的水平和垂直居中是最常用的，但是由于需求的多样性，针对不同情况会有不同的处理方案，因此，总结了一下关于这类问题的解决方案
行内元素的水平居中
要实现行内元素（<span>、<a>）的水平居中，只需要将行内元素包裹在块级父元素（display:block）中并且在父级元素设置CSS:
#container{
text-align:center;
}
这种方法适用于display属性为inline、inline-block、inline-table、inline-flex
块级元素的水平居中
要实现块级元素(display:block)的水平居中，只需要将其CSS属性设置为：
#center{
margin:0 auto;
}
多个块级元素的水平居中
【1】传统方式：
设置水平排列的块级元素的display:inline-block，设置其父元素的text-align:center，达到与上面的额行内元素相同的效果
#container{
text-align:center;
}
.center{
display:inline-block;
}
【2】使用flexbox实现
使用之前，首先简单介绍flexbox。
Flexbox布局是CSS3中一种新的布局方式，它能够提供一个更有效的方式制定、调整和分布一个容器内的项目布局，即使它们的大小是未知或动态的。
使用flex
#container{
display:flex;
}
flex默认是一个块级元素，如果需要定义一个行内级元素，只需要display:inline-flex;
flexbox由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或inline-flex能得到一个伸缩容器，伸缩容器的内部元素会变成伸缩项目
回到正题，要利用flex实现多块级元素的水平居中，只需要将父级元素CSS设置为：
#container{
justify-content:center;
display:flex;
}
已知高度宽度元素的水平居中
【1】使用绝对定位和负边距实现
使用绝对定位，将元素的top、left设置为50%，再利用margin，将元素拉回本身宽高的一般，实现水平垂直居中
#container{
position:relative;
}
#center{
100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
【2】绝对定位和margin
这种方法无需知道被垂直居中的元素的宽和高
#container{
position:relative;
}
#center{
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}
未知高度和宽度的元素的水平垂直居中
【1】当要垂直居中的元素时inline或inline-block时，可以将其父元素设置为display:table-cell，配合text-align:center和vertical-align:middle就能实现水平垂直居中
#container{
display:table-cell;
text-align:center;
vertical-align:middle;
}
【2】CSS3中的transform属性
#container{
position:relative;
}
#center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
flex布局实现
#container{
display:flex;
justify-content:center;
align-item:center;
}