<!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. luogu P3592 [POI2015]MYJ

    题目链接 luogu P3592 [POI2015]MYJ 题解 区间dp 设f[l][r][k]表示区间l到r内最小值>=k的最大收益 枚举为k的位置p,那么包含p的区间答案全部是k 设h[i ...

  2. LNMP一键安装包如何重装Nginx

    LNMP一键安装包安装好后,相应的Mysql,Nginx及PHP都会安装配置完成. 由于某些特殊情况的需要,如何更换Nginx的版本呢? nginx升级脚本可以完成. 1. 手动编译方法:/usr/l ...

  3. HDU step by step

    section 1 不解释~ section 2 1.2.1 a+b coming #include<stdio.h> long long z,x,y; int main( ) { whi ...

  4. Aptana studio 3配色方案的修改方法

    http://www.weste.net/2013/1-29/88614.html Aptana studio 3的确是一个不错的IDE,但是默认的黑底白色代码样式看时间长了有点审美疲劳了,如何能够更 ...

  5. HDU 4718 The LCIS on the Tree （动态树LCT）

    The LCIS on the Tree Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Oth ...

  6. php输出mysqli查询出来的结果

    php连接mysql我有文章已经写过了,这篇文章主要是介绍从mysql中查询出结果之后怎么输出的问题. 一:mysqli_fetch_row(); 查询结果:array([0]=>小王) 查询: ...

  7. 使用CSS3的@media来实现网页自适应

    如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去.越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至 ...

  8. 解决eclipse安装maven的问题:Unable to update index for central|http://repo1.maven.org/maven2

    问题产生如下:因为单位使用了过滤,访问Internet时,超过10M的内容就拒绝.因为maven插件在初始时,需要下载Maven的index文件,这个文件比较大,有38M多,下载不成功.所以造成使用M ...

  9. linux内核数据包转发流程（一）：网络设备驱动

    [版权声明:转载请保留出处:blog.csdn.net/gentleliu.邮箱:shallnew*163.com] 网卡驱动为每一个新的接口在一个全局的网络设备列表里插入一个数据结构.每一个接口由一 ...

  10. 基于tomcat7 web开发中的一点小东西

    控制台: org.apache.jasper.compiler.TldLocationsCache tldScanJar 信息: At least one JAR was scanned for TL ...