实现垂直居中的几种方法

来源：互联网发布：java大型开源真实项目编辑：程序博客网时间：2024/06/02 14:54

今天突然看到一篇文章利用vertical-align实现在整个页面的居然，然后就想着去整理下几种利用css实现居中的方法,仅供新手，大神绕道。。。

1：行内居中，这个比较简单也就将行高跟高度设置一样就行，也可以加个overflow:hidden;

p{ height:24px;line-height:24px;overflow:hidden;}

ps：设置overflow防止在文本过多情况下影响布局，缺点在于只能显示一行

2:多行内容居中，可以设定padding内边距让其上下居中

p{ padding:20px 0;}

ps：同样兼容所有浏览器，但是容器不能固定高度;

3:把容器当做表格单元

在css的display属性中有许多属性值，包括display:table/table-cell;

p{display: table-cell;height: 300px;vertical-align: middle;}

ps：这个兼容性不是很好，一般没必要用

4.利用绝对定位以及margin值可以为负去实现绝对的居中，这个方法在项目中我用的比较的多；

首先其父类相对定位，自身绝对定位，然后top跟left值都是50%；margin-left值为自身宽度的一半，maigin-top值为自身高度的一半，就可以了；

*{ margin:0; padding:0;}div{ position:relative; width:100%; height:300px;}div p{ background:#999; width:100px; height:50px; position:absolute; top:50%; left:50%; margin-left:-50px; margin-top:-25px;}

ps：这个方法必须给自身元素定义宽高。

5：这个就回到本文的首部，利用vertical-align：middle实现在整个页面居中，其最终效果跟方法4一样

根据W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：

现在要让class="img404"的img在class="wall"的div里面垂直居中，我可以在div里面加一个span空标签，把它的高度设为100%，再给它一个vertical-align:middle样式，同样地给img一个vertical- align:middle样式，那么img就可以在div里面垂直居中了。如图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">       <html xmlns="http://www.w3.org/1999/xhtml">   <head>       <title>404页面</title>       <style type="text/css">           body{ margin:0; background:#333; _height:100%;}            .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font-size:0;}            .img404{ border:0; width:700px; vertical-align:middle;}            .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}    </style>   </head>   <body>       <div class="wall">          <span class="verticalAlign"></span>          <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a>       </div>   </body>   </html>

以上的CSS里面在类verticalAlign加上了display:inling-block是为了触发它的layout，另外.wall里面的font-size:0是为了消除代码换行所造成的空隙。

同样的原理也可以实现文字的居中，但是还是方法1实在些。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     <html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title>居中</title>      <style type="text/css">          .wrap{ width:1000px; height:100px; border:solid 1px #999; margin:0 auto; text-align:center;}           .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}           .textSpan{vertical-align:middle;}   </style>  </head>  <body>      <div class="wrap">          <span class="verticalAlign"></span>          <span class="textSpan">文字居中</span>      </div>  </body>  </html>

6：这种方式主要针对新浏览器，有兼容问题

使用CSS3属性，只用三行CSS3代码，就会完美的让任何元素竖向居中

•.element { position: relative; top:50%; transform: translateY(-50%); }

PS：使用这种方法，元素在沿translateY移动时会损失“半个像素”，导致元素变得模糊。ok，对于这种问题，解决的方法是对其父元素使用preserve-3d属性。CSS代码如下：

•.parent-element { -webkit-transform-style: preserve-3d; } .element { position:relative; top: 50%; transform: translateY(-50%); }

0 0