<!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. 【2005-2006 ACM-ICPC, NEERC, Moscow Subregional Contest】Problem J. Jack-pot

    简单dfs,差分一下A数组和建出字典树能写得更方便,若不这么做代码时就会像我一样难受. #include<cstdio> #include<cstring> #include& ...

  2. 在Kali Linux上编译Windows EXP

    使用vc6.0去编译的时候,难免会出现点问题 这里找到MS11-046的exp来编译 poc地址:https://www.exploit-db.com/exploits/40564/ 首先需要安装mi ...

  3. codevs 1191 树轴染色 线段树区间定值，求和

    codevs 1191 树轴染色 Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://www.codevs.cn/problem/1191/ Des ...

  4. Codeforces Round #295 (Div. 2)A - Pangram 水题

    A. Pangram time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  5. android四大组件--ContentProvider具体解释

    一.相关ContentProvider概念解析: 1.ContentProvider简单介绍 在Android官方指出的Android的数据存储方式总共同拥有五种,各自是:Shared Prefere ...

  6. oracle之表空间(tablespace)、方案(schema)、段(segment)、区(extent)、块(block)

    数据文件和日志文件是数据库中最关键的文件.它们是数据存储的地方.每一个数据库至少有一个与之相关的数据文件,通常情况下不仅仅一个,有非常多.数据在数据文件里是怎样组织的?要了解这些内容我们首先必须理解什 ...

  7. VS中运行HTTP 无法注册URL

    参考资料 http://www.java123.net/detail/view-449670.html http://www.cnblogs.com/jiewei915/archive/2010/06 ...

  8. Eclipse配置mybatis-generator插件的2种方法

    原文:https://blog.csdn.net/u012825737/article/details/79117540 最近在做一个Mybatis的项目,学习到了一个插件mybatis-genera ...

  9. 《Head First 设计模式》学习笔记——策略模型

    我们全都使用别人设计好的库与框架.我们讨论库与框架.利用他们的API编译成我们的程序.享受运用别人的代码所带来的长处.看看java api它所带来的功能:网络.GUI.IO等.库与框架长久以来,一直扮 ...

  10. Selenium2+python自动化29-js处理多窗口

    前言 在打开页面上链接的时候,经常会弹出另外一个窗口(多窗口情况前面这篇有讲解:Selenium2+python自动化13-多窗口.句柄(handle)),这样在多个窗口之间来回切换比较复杂,那么有没 ...