<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. HCNA Routing&Switching之动态路由协议OSPF DR和BDR

    前文我们了解了OSPF建立邻居关系的条件,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15032907.html:今天我们来聊一聊OSPF中的DR和BDR: ...

  2. MySQL8.0.26安装与卸载

    一.安装 1.官网下载 百度进入官网,学习用社区版够了,我下的是压缩版点这直达下载页 据说8.X版本性能优化,比5.7版本快2倍! 接着,不登录直接下载 2.创建配置 下载完后,建议解压到一个没有中文 ...

  3. 极致简洁的微前端框架-京东MicroApp开源了

    前言 MicroApp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它是目前市面上接入微前端成本最低的 ...

  4. javascript学习五---OOP

    面向对象:JavaScript的所有数据都可以看成对象 JavaScript的面向对象编程和大多数其他语言如Java.C#的面向对象编程都不太一样.如果你熟悉Java或C#,很好,你一定明白面向对象的 ...

  5. 如何反编译Python写的exe到py

    参考链接: https://blog.csdn.net/qq_44198436/article/details/97314626?depth_1-utm_source=distribute.pc_re ...

  6. 自制车速记录仪「GitHub 热点速览 v.21.31」

    作者:HelloGitHub-小鱼干 如果你有一辆普通的自行车,那么就可以使用下 X-TRACK 这个项目制作一个自己的测速器,记录你的行驶轨迹还有车速,体验一把硬件发烧友的乐趣.如果你有一个非 ma ...

  7. Java中9种常见的CMS GC问题分析与解决

    1. 写在前面 | 本文主要针对 Hotspot VM 中"CMS + ParNew"组合的一些使用场景进行总结.重点通过部分源码对根因进行分析以及对排查方法进行总结,排查过程会省 ...

  8. 小白的 Python 修炼手册：入门篇

    Life is short, you need Python.(人生苦短,我用 Python.) --Bruce Eckel 前言 听说现在是全民 Python 的时代,虽然不知道事实如何,但学会 P ...

  9. time_formatter writeup

    攻防世界time_formatter writeup UAF漏洞和命令注入. 前置知识 1.strdup函数 char * __strdup(const char *s) { size_t len = ...

  10. BUUCTF-[网鼎杯 2018]Fakebook(SSRF+联合注入绕Waf)

    记一道SSRF配合SQL注入的题. 喜欢在做题之前扫一下网站的目录,扫到了robots.txt文件可以访问,拿到user.php.bak的源码.同时还有flag.php. <?php class ...