常见几种：
- 把margin设为auto
具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
2、使用 text-align:center
这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
3、使用line-height让单行的文字垂直居中
把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。
定宽
水平居中
1.确定宽度的块级元素水平居中方法margin：0 auto；
2.绝对定位和left:50%,margin-left:-(width/2)
3.flex水平居中，justify-content:center;
垂直居中
1.固定宽高绝对定位top:50%,margin-top:-(height/2);line-height=height（单行的文字垂直居中）
2.flex垂直居中，align-items:center;
水平垂直居中
1.绝对定位
2.flex布局
不定宽
水平居中
垂直居中
水平垂直居中
均可
水平居中
1.inline，inline-block元素的水平居中，在父级块级元素中设置text-align:center;
垂直居中
水平垂直居中
1.使用表格
在表格中，则，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性处理它里面内容的水平和垂直居中问题,而且表格默认的就会对它里面的内容进行垂直居中。
2.使用display:table-cell来居中
3.使用浮动配合相对定位来进行水平居中
大概介绍一下1和3里面涉及到的
如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。
方法三此方法也是关于浮动元素怎么水平居中的解决方法，并且我们不需要知道需要居中的元素的宽度。
浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。
<style>
<div class="a">
<div class="b">234567890</div>
</div>
.a{
float:left;
position:relative;
left:50%;
border:2px solid red;
clear:both;
}
.b{
border:1px solid yellow;
position:relative;
left:-50%;
background:green;
}
</style>
