<!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. 线性表之顺序栈C++实现

    线性表之顺序栈 栈是限定仅在表尾(栈顶)进行插入删除操作的线性表,FILO:先进后出 一.顺序栈的头文件:SeqStack.h //顺序栈头文件 #include<iostream> us ...

  2. 【20181030T2】字胡串【分治+双指针】

    题面 [正解] 一眼分治 哎\(O(N^2)\)有50分,先敲了 等下,由于最大的数或进去了,所以有\(g(T) \geq f(T)\) 也就是说,我们用\(n \times (n-1) /2\)算出 ...

  3. Alpha 冲刺报告5

    组长:吴晓晖 今天完成了哪些任务: 将服务端程序基本部署在阿里云上,还未进行测试 完成了手写记录的代码实现 处理团队问题 为明天的编程任务做准备 展示GitHub当日代码/文档签入记录: 明日计划: ...

  4. bzoj 2850

    比较基础的KD树.每个节点维护一个BOX,包含包含当当前子树的点的最小矩形,以及点权和,然后用“整个矩形都在直线的一侧”和“整个矩形都不在直线的一侧”剪枝. /******************** ...

  5. js ajax post 提交的时候后台接收不到参数，但是代码没有错，怎么回事

    这个错误有两点,你自己写的php页面里面的参数接收出错了 还有就是你没有写一句重要的代码告诉浏览器 你使用post提交方式去提交 xhr.setRequestHeader("Content- ...

  6. ServletActionContext.getRequest().getSession() 和 ActionContext.getContext().getSession()

    ActionContext.getContext().getSession(); 这个方法获取的session是struts封装过的一个Map类型的session,只能调用put()方法缓存数据. S ...

  7. Struts2 JSONObject的使用

    一.jar包 使用之前必须引入所须要的jar包,这里包含Struts2和JSONObject各自所必须的 Struts2: commons-fileupload-1.2.1.jarcommons-io ...

  8. C/C++ 函数指针 总结

    什么是函数指针 就像某一变量的地址可以存储在相应的指针变量中一样,指向函数的指针中保存着函数代码起始处的地址 函数指针的声明 当声明一个函数指针时,必须声明它指向的函数类型.要指定函数类型,就要指出函 ...

  9. [html5]使用localStorage兼容低版本Safari无法使用indexeddb的情况

    摘要 简单场景描述:将html5开发的app内嵌入ios app中,有部分数据,需要在本地存储,就想到使用浏览器的localstorage或者indexeddb,另外localstorage存储的方式 ...

  10. lucene.net 3.0.3、结合盘古分词进行搜索的小例子（分页功能）

    转自:http://blog.csdn.net/pukuimin1226/article/details/17558247 添加:2013-12-25 更新:2013-12-26 新增分页功能. 更新 ...