html教程
css教程
前端开发
cms教程
seo优化
网页设计
服务器
数据库
平面设计
电脑教程
编程教程
互联网
移动开发
php编程
java编程
建站技巧
Python编程
css教程:DIV垂直居中的办法
时间:2016-04-10
经过今天一翻改进,终于找出了解决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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS布局技巧:未知高度div 垂直居中的问题</title>
<style type="text/css">
html,body
{
height: 100%;
padding:0;
margin:0;
}
body
{
min-height: 200px;
text-align: center;
min-width: 402px
}
.FirstDIV
{
margin-top: -100px; /* SecondDIV高度的一半 */
float: left;
width: 100%;
height: 50%;
}
.SecondDIV
{
clear: both;
border: silver 1px solid;
background: #666;
margin-left: auto;
overflow: auto;
width: 400px;
margin-right: auto;
height: 200px;
text-align: left
}
</style>
</head>
<body>
<div class="FirstDIV"></div>
<div class="SecondDIV">
<p>看看,这不就居中了。呵呵。而且没有问题哦。www.Webjx.com </p>
<p>body{ background-color:#FFF5F0}<br>
div{ position:absolute; top:50%; left:50%; margin:-100px 0 0 -200px;
width:400px; height:200px; border:1px #CCCC00 solid; font-family:Arial,
Helvetica, sans-serif; color:#666666 } </p>
</div>
</body>
</html>
演示代码:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS布局技巧:未知高度div 垂直居中的问题</title> <style type="text/css"> html, body { height: 100%; padding:0; margin:0; } body { min-height: 200px; text-align: center; min-width: 402px } .FirstDIV { margin-top: -100px; /* SecondDIV高度的一半 */ float: left; width: 100%; height: 50%; } .SecondDIV { clear: both; border: silver 1px solid; background: #666; margin-left: auto; overflow: auto; width: 400px; margin-right: auto; height: 200px; text-align: left } </style> </head> <body> <div class="FirstDIV"></div> <div class="SecondDIV"> <p>看看,这不就居中了。呵呵。而且没有问题哦。www.Webjx.com </p> <p>body{ background-color:#FFF5F0}<br> div{ position:absolute; top:50%; left:50%; margin:-100px 0 0 -200px; width:400px; height:200px; border:1px #CCCC00 solid; font-family:Arial, Helvetica, sans-serif; color:#666666 } </p> </div> </body> </html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
上一条:解决全部网页木马的技巧
下一条:css常用布局多行多列
相关文章
让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
demo展示1: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w
JQuery获取文章内容页自适应高度,优化界面外观
如何用js得到当前页面的url信息方法(JS获取当前网址信息)
设置或获取对象指定的文件名或路径。alert(window.location.pathname
分享js跳转页面方法
spanid=tiao"
jquery对单位进行换算的“笨”方法
DEDE项目上 编辑软件大小(单位换算):$(doc
JS简单页面倒计时转跳
script language="javascript"&g
最新文章
js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 p 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了
何为百度移动网站MIP?MIP对网站有什么帮助?
随着移动互联网的发展,网友们对于移动产品服务体验要求也越来越高,当然了像移动网站体验也包括在内,随着互联网技术的发展,现在移动网站页面技术也一直在提升和创新,今
js实现点击按钮复制文本功能
如何去掉html中input的边框
js 判断字符串中是否包含某个字符串
织梦DedeCms做SEO优化必做的步骤
video标签设置autoplay在手机浏览器无法自动播放视频的解决方案
让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
怎么拿到input file上传的文件名字显示到页面中
何为百度移动网站MIP?MIP对网站有什么帮助?
swiper无法自动播放的解决办法
bootstrap在移动浏览器下响应式不起作用的解决方法