<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div居于页面正中间</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            background-color: #EAEAEA;

        }

        div{

            width: 200px;

            height: 200px;

            background-color: #1E90FF;

        }

        .center-in-center{

<!--        第一种：-->

                position: absolute;

                top: 0;

                left: 0;

                right: 0;

                bottom: 0;

                margin: auto;

<!--             第二种-->

<!--            position: absolute;-->

<!--            top: 50%;-->

<!--            left: 50%;-->

<!--            -webkit-transform: translate(-50%, -50%);-->

<!--            -moz-transform: translate(-50%, -50%);-->

<!--            -ms-transform: translate(-50%, -50%);-->

<!--            -o-transform: translate(-50%, -50%);-->

<!--            transform: translate(-50%, -50%);-->

        }

    </style>

</head>

<body>

    <div class="center-in-center"></div>

</body>

</html>

图片显示：

div 居中显示的更多相关文章

  1. 设置div中的div居中显示

    设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...

  2. DIV居中显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

  4. 多个div居中显示

    页面中有多个div时我们希望并排居中显示,可以通过在并排显示的div上一层再加一个div,设定宽度,然后让其居中显示达到需要的效果. 关键是要对外层div设定宽度. <!DOCTYPE html ...

  5. css div居中显示的4种写法

    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...

  6. 不固定宽度的div居中显示

    对于div的居中 ,如果是有固定宽高的,可以加margin:auto;水平垂直居中,但如果是不固定宽高,又想让div居中的话,这种方式都可能不奏效,达不到想要的效果. 有两种方法:1.加display ...

  7. 【HTML】div居中显示

    方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...

  8. 使用inline-block，使前面img,后面空div居中显示在一行后，导致当div中有内容时，div下移问题

    .pro_li img,.pro_sm{display: inline-block; *display:inline;*zoom:1;vertical-align: middle ;} 解决方法:使用 ...

  9. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

随机推荐

  1. LeetCode通关：听说链表是门槛，这就抬脚跨门而入

    分门别类刷算法,坚持,进步! 刷题路线参考:https://github.com/youngyangyang04/leetcode-master       https://github.com/ch ...

  2. 《面试八股文》之 Redis 16卷

    微信公众号:moon聊技术 关注选择" 星标 ", 重磅干货,第一 时间送达! [如果你觉得文章对你有帮助,欢迎关注,在看,点赞,转发] 大家好,我是 moon. redis 作为 ...

  3. R Studio Server install fails - hard coded libssl1.0.0 dependency out of date ...

    wget http://ftp.debian.org/debian/pool/main/o/openssl/libssl1.0.0_1.0.1t-1+deb8u6_amd64.deb md5sum l ...

  4. 新iPhone有望加入指纹解锁，你会买吗？

    苹果新款iPhone即将在9月份正式发布,或命名为iPhone 13或者iPhone 12s.据外媒报道,新一代iPhone的屏幕和相机都将迎来重大升级,同时还将首次加入屏下指纹解锁技术.你期待吗? ...

  5. webpack 命令行报错“webpack” 不是内部或外部命令的解决方法

    1. NodeJS安装,笔者安装在D盘.安装目录中有两个文件夹node_cache,node_global如下: 2. 配置 npm安装路径,输入如下命令: npm config set prefix ...

  6. 最大公约数and最小公倍数（Java版）

    1.最大公约数and最小公倍数 import java.util.Scanner; public class MultipleAndDivisor { public static void main( ...

  7. Fast Run：提高 MegEngine 模型推理性能的神奇功能

    作者:王博文 | 旷视 MegEngine 架构师 一.背景 对于深度学习框架来说,网络的训练/推理时间是用户非常看中的.在实际生产条件下,用户设计的 NN 网络是千差万别,即使是同一类数学计算,参数 ...

  8. kubernetes/k8s CRI分析-kubelet创建pod分析

    先来简单回顾上一篇博客<kubernetes/k8s CRI 分析-容器运行时接口分析>的内容. 上篇博文先对 CRI 做了介绍,然后对 kubelet CRI 相关源码包括 kubele ...

  9. ip地址分配

    目录 一.子网划分基础 二.子网划分的原理 三.IP地址汇总 四.ip地址规划 一.子网划分基础 二进制: 特点:基数为2,数值部分用2个不同的数字符号0.1表示逢二进一 IP地址:IP地址由32位二 ...

  10. promise详解 ： 实现promise（附实现代码）

    promise then 的特点 : then 函数的返回值是一个 promise, 可以继续调用 then 函数 回调函数 resolve 和 reject 的参数 value /reason, 可 ...