<!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. 179. Largest Number -- 数字字符串比较大小

    Given a list of non negative integers, arrange them such that they form the largest number. For exam ...

  2. VMware vSphere Client5.0与 Windows8不再有问题，解决VMware 5.0 客户端提示VMRC控制台的连接已断开

    问题:VMware 5.0 客户端提示VMRC控制台的连接已断开...正在尝试重新连接,系统是win8的 网上解决办法: WIN8,在安装vmware vsphere client 5.0时出现兼容性 ...

  3. Java集合——List接口

    1.定义 List是Collection的子接口,元素有序并且可以重复,表示线性表. 2.方法 add(int index,Object e):在指定索引(和数组下标类似,为0,1,2....)放入元 ...

  4. 如何为Kafka集群选择合适的Partitions数量

    转载:http://blog.csdn.net/odailidong/article/details/52571901 这是许多kafka使用者经常会问到的一个问题.本文的目的是介绍与本问题相关的一些 ...

  5. 重点关注之OData with List

    OData是什么 官方解释:The Open Data Protocol (OData) is a data access protocol for the web. OData provides a ...

  6. 动手实践：在Windows上安装NumPy、Matplotlib、SciPy和IPython

    参考:http://book.2cto.com/201401/39327.html

  7. HTTPS是如何保证连接安全,你知道吗？

    HTTPS协议的工作原理是什么?”这是我在数天前工作项目中需要解决的问题. 作为一名Web开发者,我当然知道 HTTPS 协议是保障用户敏感数据的好办法,但并不知道这种协议的内在工作机制. 它怎么保护 ...

  8. HDU 4893 Wow! Such Sequence!（2014 Multi-University Training Contest 3）

    题意: 有三种操作: 1 x y: 表示给x位置加上y 2 x y:查询[x,y]的区间和 3 x y:将 [x,y] 区间上的数变为最接近的 Fibonacci. 思路: 1 操作按正常单调更新,区 ...

  9. c# MVC在WEB.Config中配置MIME

    在IIS中,默认没有添加.json格式的MIME,所有无法读取服务器中的.json格式的文件,返回结果404 方式一:在IIS中手动添加MIME 1.点击MIME进入MIME列表 2.添加MIME 3 ...

  10. C#根据当前日期获取星期和阴历日期

    private string GetWeek(int dayOfWeek) { string returnWeek = ""; switch (dayOfWeek) { case ...