css 垂直居中的实现方法

时间:2012-12-29 08:41来源:未知作者:admin 点击: 次

分享到：

文章介绍了利用css 垂直居中的实现方法，下面有详细的实现，有需要参考居中的朋友可以看看。利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理

文章介绍了利用css 垂直居中的实现方法，下面有详细的实现，有需要参考居中的朋友可以看看。

利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明：

垂直居中

代码如下
* 代码实现： * 设定宽度和高度，父节点为 position:relative; CSS是这样写的: */ .selector { position:absolute;top:50%;。 margin-top:-元素自身高度的一半; }

实例

代码如下

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>垂直居中</title>

<style>
*{margin:0;padding:0;}
body{font-family:consolas;padding:20px;}
img, p{border:1px dotted #bbb;padding:5px;}
p{margin-bottom:10px;}
a{text-decoration:none;}

.wrap{
     width:500px;height:300px;border:3px solid #ddd;margin:0 auto;padding:20px;display:table;
     *position:relative;
    }
.hack{
     display:table-cell;vertical-align:middle;
     *position:absolute;*top:50%;
    }
    .cnt{
        *position:relative;*top:-50%;
    }
</style>

</head>
<body>

<div class="wrap">
    <div class="hack">
        <div class="cnt">
        <img src="/20110425930115.png" alt="google" />
        <p>这里面是内容啊，www.111cn.net
        </p>
        <p>
        <a href="http//:www.111cn.net" title="返回：垂直居中的几种实现方法">返回：垂直居中的几种实现方法 »</a>
        </p></div>
    </div>
</div>

</body>
</html>

上一篇：css 实现浏览器窗口居中div层方法
下一篇：javascript图片按比例自适应缩放实现代码

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

BS项目中的

css实现气泡

精彩文章

热点文章

css 垂直居中的实现方法

热门标签

赞助商链接