css居中
1.margin:0 auto;
定义和用法
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注释：允许使用负值。

垂直外边距之所以设计为可以在垂直方向合并主要是方便文本的排版，即一段文本分行的时候上下两行直接的间距不会叠加。

简写的情况：

/*四个方向的外边距
都是10px*/
margin: 10px;
/上下的外边距都是10px，左右的外边距20px/
margin: 10px 20px;
/上的外边距都是10px，左右的外边距是5px，下外边距15px/
margin: 10px 5px 15px;
/四个值依次是上、右、下、左/
margin: 10px 5px 15px 20px;
/设为auto的计算方式/
margin: 0 auto; /常用的水平居中对齐方式/
margin: auto;
上述的auto的计算方式是父容器-子元素剩余部分浏览器自动计算，以上述的水平居中方式为例，左右的外边距等于父容器减去子容器剩余部分的宽度均匀分配给左右，从而实现居中对齐的效果。

上诉的第二种声明并不能实现垂直居中的效果，具体可以看w3c标准声明或看下知乎的这篇文章。

margin使用百分比单位计算的情况
/百分比是按照父容器的宽度来计算的，务必注意/
margin: 20%;
从上我们可以知道通过margin如何实现水平居中。

2.text-align:center;
1）绝对定位实现垂直居中

position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
width:100px;
height:100px;

采用绝对定位加负外边距的方式，首先上，左偏移父容器的50%;然后再自身偏移自己宽高的50%，从而实现垂直水平居中。该方式需要居中元素的宽高确定。

2）绝对定位且居中元素不知宽高的情`
`position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100px;
height:100px;`

在这里使用CSS3的transform:translate(-50%,-50%);属性来实现元素自身的一个偏移

3）绝对定位+margin:auto;实现水平垂直居中

position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100px;
height:100px;
margin:auto;

转载别人的 主要自己看