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。要不然旋转没有作用。