<!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. luoguP4491 [HAOI2018]染色 广义容斥原理 + FFT

    非常明显的摆了一个NTT模数.... 题目中求恰好\(k\),那么考虑求至少\(k\) 记\(g(k)\)表示至少\(k\)中颜色出现了恰好\(S\)次 那么,\[g(k) = \binom{M}{k ...

  2. JBOSS集群和安装

    JBOSS集群和安装 http://jijian91.com/blog20071010/jboss-cluster-part5.html http://wing123.iteye.com/blog/3 ...

  3. BZOJ 2756: [SCOI2012]奇怪的游戏 网络流/二分

    2756: [SCOI2012]奇怪的游戏 Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 1594  Solved: 396[Submit][Stat ...

  4. Swift 内存管理

    1.Object-C 经历两个阶段: 1.手动引用计数内存管理(Manual Reference Counting,MRC) 2.自动引用计数内存管理(Automatic Refernce Count ...

  5. VC++ 设置控件显示文本的前景色、背景色以及字体

    在每个控件开始绘制之前,都会向其父窗口发送WM_CTLCOLOR通告消息,在该消息的处理函数中,可以设置控件显示文本的前景色.背景色以及字体.该消息处理函数还要求返回一个画刷的句柄,用于在控件具体的绘 ...

  6. THE CUSTOMISER

    http://www.wanga.com/cu.php The Customiser incorporates all of the features of Magic Mouse. It also ...

  7. winform打开进程与关闭进程

    #region 判断某进程名是否运行 /// <summary> /// 关闭指定名称的进程 /// </summary> /// <param name="p ...

  8. java基础学习总结——多态(动态绑定)

    一.面向对象最核心的机制——动态绑定,也叫多态

  9. [MSDN] Windows Server 2012 R2 简/繁/英下载

    Windows Server 2012 R2 Chinese-Simplified ISO SHA1-------------------------------------------------- ...

  10. 配置Tomcat成为系统服务

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...