涉及到居中问题,大家首先想到的肯定是margin、text-align、vertical-align这些,然而这些具体是怎么回事呢?通过css实现元素的居中,主要有以下几种方法:
水平居中
1.margin:0 auto
实际上是把元素的margin-left、margin-right均设为0,将元素进行水平居中,但是此方法对浮动元素及绝对定位元素无效。
2.text-align:center
这个属性作用如字面意思,实现了水平居中,只针对图片、按钮、文字等行内元素(display为inline或inline-block等),但是在IE6、7浏览器中,能够实现任何元素的水平居中。
3.浮动元素相对定位
把浮动元素相对定位到父元素宽度50%的地方,但此时比居中的位置多出自身的宽度,这就需要他里面的子元素(即居中元素)再用一个相对定位,把多出的宽度抵消。由于相对定位是相对于自身原来的文档流,只需把自身宽度的一半设为left或right即可。
此方法优点是无需知道居中元素的宽度,缺点是需要一个多余的元素来包裹居中元素。
代码如下:
运行效果:
垂直居中
1.inline-height
将inline-height设为文字父元素的高度,可让单行的文字垂直居中。
当当当!接下来重点来了~
完全居中
1.position:absolute
通过绝对定位进行居中,通过设置left、right、top、bottom实现居中,比较简单,在此就不细讲啦
2.table
只要将td元素的align设为center,valign设为middle就可以实现内容的水平居中与垂直居中。
3.display:table-cell
对于不是表格的元素,可以通过设置父元素的display:table-cell把该元素模拟成一个表格单元格,并将设置text-align:center、vertical-align:middle,子元素属性设置display为inline-block等行内元素,如此就可以实现水平与垂直居中了。代码如下:
运行效果:
4.margin与position等
居中元素属性设置margin:auto、position:absolute、top:0、right:0、bottom:0、left:0,即可以实现元素的绝对居中啦。
运行效果:
此方法有以下优点:
Ø 兼容性较好(无需hack,兼容IE8+)
Ø 无特殊标记,样式更精简
Ø 自适应布局,可以使用百分比和最大最小高宽等样式
Ø 居中时不考虑元素的padding(也不需要使用box-sizing属性)
Ø 布局块可自由定义大小
Ø Img图像也适用
但同时得注意:
Ø 必须声明元素高度
Ø 推荐设置overflow:auto,避免元素溢出导致显示不正常
Ø 这种方法在Windows phone上不起作用
Ø 对于容器内元素居中,则需设置容器position:relative
这些应该是常见的几种居中方法了,每个方法都有适用的场景,不全面的或者有疏漏之处,敬请指正哈。