今天来总结一下使用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;

完美

最后做个小结：