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="返回：垂直居中的几种实现方法">返回：垂直居中的几种实现方法 &raquo;</a>
        </p></div>
    </div>
</div>

</body>
</html>
时间： 2024-12-24 21:05:23

css 垂直居中的实现方法的相关文章

CSS实现同一行的图片和文字垂直居中对齐的方法

 本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法.分享给大家供大家参考.具体分析如下: 有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢,很简单,就是在图片和文字所在的行中添加CSS属性:vertical-align:middle;这样,它们在同一行就会垂直居中对齐了. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

CSS布局常用的方法和实例及一些问题

css|问题 1.CSS布局常用的方法:float : none | left | right 取值:none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml: <div id="warp"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二

CSS隐藏文字的方法

h1标签对提高SEO关键词排名的作用想必是个站长都知道,但是h1标签会使文字变大,有时候会在网页中显得格格不入.下面小编来跟大家分享下CSS隐藏文字的方法. 下面就拿网络教学基地logo部分用CSS隐藏文字来给大家举例: 我们从h1代码部分看到的其实只是文字描述,但是为了整体美观考虑,我们把h1标签里面的a链接文字用CSS隐藏,并且设置背景图片logo,这样外观看到的就是logo图片 CSS隐藏文字代码: h1 a { height: 80px; width: 280px; float: lef

DIV CSS隐藏内容样式方法大全

 DIV CSS网页布局有很多值得学习的地方,这里和大家重点讨论一下DIV CSS隐藏内容样式方法,相信本文介绍一定会让你有所收获.   DIV CSS隐藏内容样式方法   CSS隐藏的用途   1.对文本的隐藏   2.隐藏超链接(另类黑链)   3.对统计代码隐藏   4.隐藏超出图片   5.CSS隐藏滚动条   6.CSS来隐藏DIV层   使用CSS隐藏方法   1.使用display:none;来隐藏所有信息(无空白位占据)推荐,CSSdisplay手册查看   2.使用overfl

纯语义化XHTML CSS设计表单方法

  很多CSS爱好者不喜欢HTML表格,尤其是在制作表单的时候,虽然现在已经是XHTML CSS的年代,但表单的设计大多还在采用table来布局.那么,有没有更好的使用纯语义化XHTML CSS设计表单方法呢?今天让我们一起来尝试这种更符合语义化的方法来代替Table嵌套的表单元素吧!  在这里要说,并不是要完全摒弃table的使用,它有它的语义化布局作用,尤其是在存储数据的时候.我在大多数情况下会使用纯CSS来设计表单,但是,我也很喜欢表格,只要我们能在正确的地方使用正确的元素就可以了,不要太

避免Smarty与CSS语法冲突的方法

这篇文章主要介绍了避免Smarty与CSS语法冲突的方法,实例分析了Smarty与CSS中大括号{}冲突的处理技巧,需要的朋友可以参考下     本文实例讲述了避免Smarty与CSS语法冲突的方法.分享给大家供大家参考.具体分析如下: 熟悉CSS的人很快就会发现Smarty和CSS的语法存在冲突,因为二者都需要使用大括号{}.如果简单地将CSS标记嵌入到HTML文档首部,将导致"不可识别标记"错误: ? 1 2 3 4 5 6 7 8 9 10 <html> <he

jquery实现不同大小浏览器使用不同的css样式表的方法

 这篇文章主要介绍了jquery实现不同大小浏览器使用不同的css样式表的方法,需要的朋友可以参考下 该方法支持IE浏览器和其他浏览器.   1.首先定义两个link,当然你也可以是一个,第二个是要更改的css  代码如下: <link rel="stylesheet" type="text/css" href="main.css" /> <link id="size-stylesheet" rel=&quo

【HTML】通过不同的分辨率调用不同的css，两种方法：css本身判断、js调用css

通过百度发现很多的方法,不过每个方法用起来都不太好,css 直接判断的话,需要写很多,而如果,两套的话,书写起来就很方便,我个人采用了js这种方法,很有层次感. 下方这种方法是来自网络上http://www.divcss5.com/jiqiao/j662.shtml  (是这个内容,不过不是这个网站复制的.)   css: <style> .abc{  height:300px;  border:1px solid #000;  margin:0 auto; }  /* 设置了浏览器宽度不小于

避免Smarty与CSS语法冲突的方法_php实例

本文实例讲述了避免Smarty与CSS语法冲突的方法.分享给大家供大家参考.具体分析如下: 熟悉CSS的人很快就会发现Smarty和CSS的语法存在冲突,因为二者都需要使用大括号{}.如果简单地将CSS标记嵌入到HTML文档首部,将导致"不可识别标记"错误: <html> <head> <title>{$title}</title> <style type="text/css"> p{ margin::2p