今天来总结一下使用css来使元素居中的方法，首先说说使元素居中的基本思路
1、水平居中：margin-left=margin-right;
2、竖直居中：margin-top=margin-bottom
块元素居中
1、div水平居中
很自然，这个div通过设置左右外边距auto的方式实现了居中
2、div竖直居中
为了使效果更加明显，使用两个div来嵌套，这里要竖直居中的是子元素——“son”
实现的效果
1、设置父元素的height=line-height；
2、设置子元素的display为inline-block
3、设置子元素的vertical-align为middle
这样就完美地使div竖直居中了
这时候我忽然想让他水平居中和竖直居中一起实现，我加上margin：0 auto；
最后效果
发现这招怎么不管用了，水平居中并没有实现，这是出了什么问题呢？
别忘了此时他是一个inline-block，既具有block的宽度高度特性又具有inline的同行特性。
既然如此，父元素的宽度为200px，子元素的宽度为100px，经过复杂的计算。。。。
设置margin-left：50px就可以了
行内元素居中
水平居中
竖直居中
添加上lineheight：200px；
用a元素试试，同样一步到位，没毛病
用链接代替span
s,i,b等标签同理
如果将内容替换为图片呢
htnl部分
css部分
效果并不是特别好，竖直居中出了问题
什么鬼？我只是想居个中而已呀？
思考
img可以设置width和height，是一个行内块元
加上块元素的设置居中方法
把display：inline-block和vertical-align：middle补上
感动~~~居中再次奏效
忽然想到之前做过的一些注册界面，如果每一行都这么做是不是会很简单呢？
html代码
css内容
界面
目前只是为了调试居中的效果，并没有写过多的样式，但是居中的效果还是可以的
定位居中
直接上代码
没有任何的定位设置
熊本在左上方，宽度是div的三分之一
添加相对定位
完成居中
当然改为绝对定位也是可以的，但是要先在css中去掉标签自带的margin和padding，否则定位回受到影响
去除自带样式的内外边距
background-image也想要居中？
多大点事~
Q：如果是一个行内元素添加背景呢？
A：设置display属性为inline—block不就可以了
按照原来的代码来
呃呃。。。不想玩了
既然不能通过text-align来设置水平居中，那就只能向margin低头了
添加margin：50px;
完美
最后做个小结：
