<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

    body {

        padding: 0;

        margin: 0;

    }

    /*垂直居中*/

    .box {

        width: 1200px; /*图片宽*/

        height: 650px; /*图片高*/

        position: absolute;

        left: 50%;

        top: 50%;

        margin-left: -600px;/* 宽/2 */

        margin-top: -325px; /* 高/2 */

    }

    </style>

</head>

<body>

    <div class="box">

        <img src="img/luomu_02_02.png" />

    </div>

</body>

</html>

@落雨

http://ae6623.cn

效果:

div css水平垂直居中的更多相关文章

  1. css的div动态水平垂直居中

      div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...

  2. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  3. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

  4. css3 flex 详解,可以实现div内容水平垂直居中

    先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...

  5. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  6. div盒子水平垂直居中的方法推荐

    父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...

  7. CSS：div/img水平垂直居中

    div水平垂直居中方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  9. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

随机推荐

  1. bzoj4668: 冷战 并查集按秩合并

    题目链接 bzoj4668: 冷战 题解 按秩合并并查集,每次增长都是小集合倍数的两倍以上,层数不超过logn 查询路径最大值 LCT同解 代码 #include<bits/stdc++.h&g ...

  2. SPOJ8791 DYNALCA LCT

    考虑\(LCT\) 不难发现,我们不需要换根... 对于操作\(1\),\(splay(u)\)然后连虚边即可 对于操作\(3\),我们可以先\(access(u)\),然后再\(access(v)\ ...

  3. 转 MySQL连接超时

    在负载较重的MySQL服务器上,有时你偶尔会看到一些连接超时的错误,诸如: Can’t connect to MySQL server on ‘mydb’(110).如果当时你有多个连接请求,你会发现 ...

  4. TortoiseGit + msysgit 记住帐号密码方法及使用密匙的方法

    Windows 重度用户只能用 for windows 的软件了,所以虽然使用 Git,但还是要找专门的 windows 版本. 最近开始使用 GitHub 来托管一些小项目/兴趣,而自己是重度 wi ...

  5. 关于THINKPHP的addAll支持的最大数据量

    Thinkphp中的Model操作有两个方法:add()和addAll $User = M("User"); // 实例化User对象 $data['name'] = 'Think ...

  6. 【NOIP2014】生活大爆炸版石头剪刀布

    石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一 样,则不分胜负.在<生活大爆炸>第二季第 8 集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的石头剪 ...

  7. 关于多重嵌套的JSON数据解析

    最近项目中需要封装一套复杂的数据模型返回给前端,大致就是一个用户会有多笔订单,每个订单下可能会有多笔保单, 大致的数据模型如下: 为了方面描述,先看一下一个用户下有一条订单,一条订单下有一个保险订单的 ...

  8. Yii together

    一对多,多对多的关联时最后的参数 together说明 如果为false,分开查多个语句 如果为true,强制生成一个语句 如果没有设置,分页页生成多个语句,不分页时生成一个语句 多对多时,查询时,中 ...

  9. Unity消息

    GameObject关于Message带有三种方法, gameObject.SendMessageUpwards ("test1",4);gameObject.SendMessag ...

  10. JAVA设计模式之门面模式（外观模式）

    医院的例子 现代的软件系统都是比较复杂的,设计师处理复杂系统的一个常见方法便是将其“分而治之”,把一个系统划分为几个较小的子系统.如果把医院作为一个子系统,按照部门职能,这个系统可以划分为挂号.门诊. ...