<!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. 233. Number of Digit One *HARD* -- 从1到n的整数中数字1出现的次数

    Given an integer n, count the total number of digit 1 appearing in all non-negative integers less th ...

  2. SELECTION-SCREEN 文本丢失

    最近有点无聊....随便找点东西填了... 自从系统上线,经常出现程序的的文本丢失,然后选择界面就变成英文的了....一直在出现,就是解决不了,不知道到底是哪里的问题 严重怀疑是服务器上文件丢失... ...

  3. 采购订单限价(包含阶梯价)ME_PROCESS_PO_CUST

    为了能管控到钱财的每个环节,公司要求采购订单需要使用物料限价,当有报价低于先前的价格时,在采购订单保存时,更新最低限价 BADI:ME_PROCESS_PO_CUST process~item里做限价 ...

  4. 【转载】Gambit使用教程

    第一章 Gambit使用 Gambit介绍 网格的划分使用Gambit软件,首先要启动Gambit,在Dos下输入Gambit <filemane>,文件名如果已经存在,要加上参数-old ...

  5. Steam和Byte[]之间进行输换

    一. 二进制转换成图片 MemoryStream ms = new MemoryStream(bytes); ms.Position = 0; Image img = Image.FromStream ...

  6. DOM系列---进阶篇【转】

    内容提纲: 1.DOM类型 2.DOM扩展 3.DOM操作内容 一．DOM类型 DOM基础篇中,我们了解了DOM的节点并且了解怎样查询和操作节点,而本身这些不同的节点,又有着不同的类型.   DOM类 ...

  7. uva 1428

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  8. treap 1286郁闷的出纳员.cpp

    #include<cstdio>#include<cstdlib>#include<ctime>struct shu{ int l,r,sum,zhi,dui;}a ...

  9. POJ 2762 tarjan缩点+并查集+度数

    Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 15494 ...

  10. DP 剪枝

    DP其实也是和搜索一样可以有剪枝的,昨晚看到一个超级好的DP剪枝题:(HDU - 5009) N段东东,要染色,每次给一个区间染色需要的花费为  该区间颜色总数的平方.  每一段只能被染一次色.求 最 ...