1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>div居于页面正中间</title>
  5.     <style type="text/css">
  6.         *{
  7.             margin: 0;
  8.             padding: 0;
  9.             background-color: #EAEAEA;
  10.         }
  11.         div{
  12.             width: 200px;
  13.             height: 200px;
  14.             background-color: #1E90FF;
  15.         }
  16.         .center-in-center{
  17. <!--        第一种：-->
  18.                 position: absolute;
  19.                 top: 0;
  20.                 left: 0;
  21.                 right: 0;
  22.                 bottom: 0;
  23.                 margin: auto;
  25. <!--             第二种-->
  26. <!--            position: absolute;-->
  27. <!--            top: 50%;-->
  28. <!--            left: 50%;-->
  29. <!--            -webkit-transform: translate(-50%, -50%);-->
  30. <!--            -moz-transform: translate(-50%, -50%);-->
  31. <!--            -ms-transform: translate(-50%, -50%);-->
  32. <!--            -o-transform: translate(-50%, -50%);-->
  33. <!--            transform: translate(-50%, -50%);-->
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <div class="center-in-center"></div>
  39. </body>
  40. </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. Maven BOM！拿来吧你

    what BOM? BOM(Bill of Materials)是由Maven提供的功能,它通过定义一整套相互兼容的jar包版本集合, 使用时只需要依赖该BOM文件,即可放心的使用需要的依赖jar包, ...

  2. 痞子衡嵌入式：嵌入式Cortex-M裸机环境下临界区保护的三种实现

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是Cortex-M裸机环境下临界区保护的三种实现. 搞嵌入式玩过 RTOS 的朋友想必都对 OS_ENTER_CRITICAL().OS_ ...

  3. MySQL 8.x 新版本特性赶紧学！！Linux 服务器上安装 MySQL 8.x

    我是陈皮,一个在互联网 Coding 的 ITer,微信搜索「陈皮的JavaLib」第一时间阅读最新文章,回复[资料],即可获得我精心整理的技术资料,电子书籍,一线大厂面试资料和优秀简历模板. 引言 ...

  4. ThreadLocal（十一）

    一.ThreadLocal源码剖析 ThreadLocal源码剖析 ThreadLocal其实比较简单,因为类里就三个public方法:set(T value).get().remove().先剖析源 ...

  5. 使用Pycharm创建Django项目无法创建app.

    Python3.7使用Django1.11.7创建Django项目报以下错误时: 在使用Pycharm创建Django项目报以下错误时: Traceback (most recent call las ...

  6. 【知识详解】Https详解

    Https详解 1.什么是Https Http + SSL = Https 一句话说:Https是身披SSL的Http,当使用了SSL后,Http先和SSL通信,再由SSL和TCP通信, 2.为什么需 ...

  7. [考试总结]noip模拟6

    我好菜啊 真上次第二这次倒二... 因为昨天还没有改完所有的题所以就留到今天来写博客了 这次考试总结的教训有很多吧,反正处处体现XIN某人的laji,自己考试的是后本以为一共四个题目,三个题目都没有看 ...

  8. 流畅的python学习1

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Created on Mon Apr 20 21:08:08 202 ...

  9. 第二篇 -- Django写一个接口并用Jmeter进行测试

    第一节学习了Jmeter的下载和安装,那么第二节就来看看具体怎么使用. 本篇介绍的是使用Jmeter进行http接口测试,那么接口程序使用Django开发的一个小接口. 一.Django编写接口 这一 ...

  10. 利用C++11可变模板，封装调用dll导出函数

    起因 开发中经常需要动态调用一些导出函数,试着利用C++11特性封装一下 尝试 常规使用 typedef int WINAPI (*TMessageBoxA)(HWND hWnd,LPCSTR lpT ...