关于居中问题

涉及到居中问题,大家首先想到的肯定是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

这些应该是常见的几种居中方法了,每个方法都有适用的场景,不全面的或者有疏漏之处,敬请指正哈。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值