<!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. TokuDB介绍——本质是分形树（一个叶子4MB）+缓存减少写操作

    其性能特点见:http://www.cnblogs.com/billyxp/p/3567421.html TokuDB 是一个高性能.支持事务处理的 MySQL 和 MariaDB 的存储引擎.Tok ...

  2. 137. Single Number II——问题是查找，本质是hash查找，只是记录的是32 bit中各个位出现次数而已

    Given an array of integers, every element appears three times except for one. Find that single one. ...

  3. mongodb 和 mysql 的对照

    In addition to the charts that follow, you might want to consider the Frequently Asked Questions sec ...

  4. ASP.NET-【Excel】-将Excel中的数据批量加载到SQLserver数据库

    用到了一个SqlBulkCopy的类 核心代码分析 代码我还没有测试过 string excelConnectionString = string.Format("Provider=Micr ...

  5. 如何理解java中的变量和常量

    int a =10;这是一个变量,在后面的代码中你可以去更改a的值但如果你在声明a的时候加上了final,那么a就成了常量,后面的代码是不允许对a做修改的.还有一点你要注意,被final修饰的常量必须 ...

  6. 二模 （8） day2

    第一题: 题目描述: 有 n 个炸弹,有些炸弹牵了一根单向引线(也就是说引线只有在这一端能被炸弹点燃),只要引爆了这个炸弹,用引线连接的下一个炸弹也会爆炸.每个炸弹还有个得分,当这个炸弹被引爆后就能得 ...

  7. 网易云课堂 OCP

    数据库DBA任务: 管理数据库可用性 设计并创建数据库 管理物理结构 管理基于设计的存储 管理安全性 网络管理 备份与恢复 数据库调整与优化 关系型数据库(RDBMS) 多个表数据之间存在着关系 关系 ...

  8. 可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK

    LEADTOOLS Video Streaming Module控件为您创建一个自定义的视频会议应用程序和工具提供所有需要的功能.软件开发人员可以使用Video Streaming Module SD ...

  9. Android 自带图标库 android.R.drawable

    在xml文件中调用. android:title="@string/secure_connect"android:orderInCategory="100"an ...

  10. 《同一个类中不同方法之间的调用相关问题（省略的类名或者this）》

    //同一个类中不同方法之间的调用相关问题(省略的类名或者this) class A { public void B() { System.out.println("b方法运行"); ...