<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="胡超">
<title>super胡</title>
<style type="text/css">
html,body,div {margin: 0;padding: 0}/*、在 content 元素外插入一个 div
并设置此 div height:50%; margin-bottom: -(contentheight + padding)/2;。

比如content高度为100px,总padding为20px ，则margin-bottom: -60px 将content挤下去
缺点就是增加了无意义的标签，但优点是简便而且IE6也得到兼容*/
.box {
margin: 20px auto;
width: 200px;
height: 600px;
background: black;
}
.floater {
height:50%;
margin-bottom: -50px;
}
.content {

margin: 0 auto;
padding: 10px;
width: 100px;
height: 100px;
border: 2px solid #adf;
background: #abc;
}

</style>

</head>
<body>
<div class="box">
<div class="floater"></div>
<div class="content"></div>
</div>
</body>
</html>

插入并列div使其居中的更多相关文章

  1. div中实现居中

    今天纠结了大半天的居中,把学到的先记录下来,还没完全弄清楚,发现网上原创的技术贴并不算多,大多都是相互转载.(ps.先安利一个大神的帖集,昨天才发现的,内容丰富,语言,呃...很幽默,一般都是图文并茂 ...

  2. 如何让图片在div里左右居中，上下居中

    如何让图片在div里左右居中,上下居中 转载▼   1.要想让图片左右对齐,我们可以在div里写入"style:text-align:center;"代码来实现. 2.要想使图片居 ...

  3. 【前端】使用CSS使元素居中的几种方式

    Precondition: <div class="parent"> <div class="item">居中</div> ...

  4. CSS实现DIV水平自适应居中

    DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...

  5. 如何让div上下左右都居中

    在做登陆页面的话,需要login的div 上下左右都居中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

  6. 并列div自动等高

    并列div自动等高 方法一:css控制 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. 常用布局，div竖直居中

    常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...

  8. div元素上下左右居中

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. Latex: 使 tabular 居中

    参考: How to center the table in Latex Latex: 使 tabular 居中 解决方法1: { \centering \begin{tabular} ... \en ...

随机推荐

  1. MATLAB画图

    画图代码 clear % http://www.peteryu.ca/tutorials/matlab/visualize_decision_boundaries % load RankData % ...

  2. easyui datagrid 学习

    一.清空datagrid所有数据 //得到所有数据行 var item = $('#ylProductListDataGrid').datagrid('getRows'); if (item) { / ...

  3. 实战SQL Server 2005镜像配置全过程

    SQL Server 2005镜像配置基本概念 我理解的SQL Server 2005镜像配置实际上就是由三个服务器(也可以是同一服务器的三个 SQL 实例)组成的一个保证数据的环境,分别是:主服务器 ...

  4. 在Excel中引用其他宏

    在excel的使用过程中,会用到一些自定义函数,可以使用宏轻松的实现这些功能,问题是必须使用“启用宏的excel”,这样用户每次打开时都要启用宏. 现用以按背景色计划为例,解决以上问题: 1.新建一个 ...

  5. sql取年月日

    Sql Server 中一个非常强大的日期格式化函数 Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select CON ...

  6. js基础之数组

    数组方法 添加: push arr.push();//尾部添加 unshift arr.unshift();//头部添加 删除: pop arr.pop();//尾部删除 shift arr.shif ...

  7. hdu 4609 3-idiots

    http://acm.hdu.edu.cn/showproblem.php?pid=4609 FFT  不会 找了个模板 代码: #include <iostream> #include ...

  8. C++-const_cast只能用于指针和引用，对象的const到非const可以用static_cast

    Static_cast可以对对象也可以对指针也可以对引用,但是const_cast只可以对指针和引用使用,后者不可以对对象用,如果你要把一个const值转化为非const值只能用隐式执行或通过使用st ...

  9. FCKEditor文件上传提示信息的汉化

    FCKEditor文件上传提示信息的汉化在FCKeditor中,虽然可以自动监测客户端语言,但是仍有小部分信息未能得到汉化.例如上传图片.Flash时,上传成功和上传失败的对话框提示信息均为英文,只要 ...

  10. Terminating app due to uncaught

    1>Images.xcassets: A 60x60@2x app icon is required for iPhone apps targeting iOS 7.0 and later 图片 ...