<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. MySql数据库-查询、插入数据时转义函数的使用

    最近在看一部php的基础视频教程,在做案例的时,当通过用户名查询用户信息的时候,先使用了转义函数对客户提交的内容进行过滤之后再交给sql语句进行后续的操作.虽然能看到转义函数本身的作用,但是仍然有一些 ...

  2. [考试总结]noip18

    发现之前咕掉了这个考试的总结. 今天就把它给补上. 这也是一个炸裂的一场 开局以为 \(T1\) 可做,然而事实证明我又错了... 莽了一个随机化上去,轻松过了所有样例... 以为稳了 然而挂掉了.. ...

  3. python批量修改图片名称

    import os class BatchRename(): def rename(self): # windows环境 """ os.rename() 方法用于命名文件 ...

  4. QLabel的使用

    现在学习一个简单的控件Label. 第一步:打开designer.exe.拖动一个控件到主窗口,双击可以编辑文字. 第二步:设置字体大小 第三步:设置文字颜色 第四步:设置背景色 第五步:将文字居中 ...

  5. 第三十一篇 -- 理一下.h和.cpp的关系

    今天突然想到一个问题,我们平时写代码会将代码进行分类,写到不同的cpp里,然后要用到那个类里面的函数,就直接include .h文件就好了.然后今天就在想,.h里面都是一些声明,它是怎么链接到.cpp ...

  6. cytoscape-d3-force api

    { animate:true,//是否在布局运行时显示布局:特殊的"结束"值使布局具有离散布局的动画效果 maxIterations:0,//布局退出前的最大迭代次数 maxSim ...

  7. netty系列之:netty架构概述

    目录 简介 netty架构图 丰富的Buffer数据机构 零拷贝 统一的API 事件驱动 其他优秀的特性 总结 简介 Netty为什么这么优秀,它在JDK本身的NIO基础上又做了什么改进呢?它的架构和 ...

  8. Dubbo 实现一个Load Balance (用于灰度发布)

    Dubbo 可以实现的扩展很多, 官方文档在这: https://dubbo.apache.org/zh/docs/v2.7/dev/impls/ (太简单了....) 下面我们实现一个Load Ba ...

  9. noip模拟31[time·game·cover]

    noip模拟31 solutions 我就觉得这些考试题是越考越难,我是也越考越完蛋,已经完完全全的接近爆零了 只有20pts,说真的这还是我第一次挂掉30pts,本来我还有50pts嘞 所以这次考试 ...

  10. git 提代码时的相关命令，Mark一下

    以前用命令提代码都是复制粘贴,现在换了工作后,特别是回退代码的命令又忘了,去网上查了好久,心累.特此Mark一下 1. 打patch: 1.1 git diff >> ljh.patch ...