CSS布局居中问题

1. 把margin设为auto

具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。

2、使用 text-align:center

这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行

水平居中的。

3、使用line-height让单行的文字垂直居中

把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。

实例分析：

按钮这个div宽度设置的是100%，采用的是text-align:center居中，所以会覆盖查看该版本，导致无法点击。

解决办法如下：

采用left：50%，再transform去掉元素自身一半的宽度，就居中了。

说到transform顺便提一下：

之前有用过用来控制图片滑动，原样的图片是箭头向右，所以需要我们需要调整箭头向左时：

采用样式：

一定要使用display： block。要不然旋转没有作用。