<!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. 引用CSS文件到html网页里方法

        引用CSS文件到Html方法-css引入,css引用 使用不同的方法来引用css样式表,最终到达的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率. html引用cs ...

  2. Storm(1) - Setting Up Development Environment

    Setting up your development environment 1. download j2se 6 SDK from http://www.oracle.com/technetwor ...

  3. mke2fs/mks.etc3/fstab/mount指令

    一.mke2fs指令mkfs.etc3 /dev/sdb1指令 主要新学习 cat /etc/filesystem  //查看文件类型 mkfs. tab键有提示    //按照系统默认的值格式化 m ...

  4. js 日期时间控制器

    /////////////////////////调用实例 // <div> // <span>交易查询:</span> <span>从 // < ...

  5. eclipse ee 装oepe(Oracle Enterprise Pack for Eclipse)插件

    eclipse j2ee 安装weblogic插件Oracle Enterprise Pack for Eclipse(oepe) eclipse j2ee已经集成了常见的几个服务器容器,比如tomc ...

  6. Quartz2D

    http://donbe.blog.163.com/blog/static/138048021201052093633776/ 详解 代码如下: DJView 绘制线段 基本图形 // // DJVi ...

  7. 单人SVN提交bug

    The working copy "初识tableVIew" failed to commit files. fatal: Unable to create '/Users/zjj ...

  8. 分布式一致性原理—BASE

    定义 BASE是BasicallyAvailable(基本可用).Soft state(软状态)和Eventually consistent(最终一致性)三个短语的简写,是由来自eBay的架构师Dan ...

  9. ModuleWorks免费下载使用方法大全

    ModuleWorks为模拟机器的工具运转及(或)机床和车床材料的搬运提供了一整套解决方案. 模拟技术可以识别潜在的碰撞问题,允许在NC代码生成前进行除错检查,并且渐渐成为CAM处理方面必不可少的解决 ...

  10. 【转】Linux下nginx配置https协议访问的方法

    一.配置nginx支持https协议访问,需要在编译安装nginx的时候添加相应的模块--with-http_ssl_module 查看nginx编译参数:/usr/local/nginx/sbin/ ...