因为body和html，默认高度是auto

所以相对于他们作为父元素设置position:relative的top值需要加上body,html{height:100%;}
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

    </head>

    <style type="text/css">

    　　*{margin: 0; padding: 0;list-style: none;}

   　　 html,body{height:100%;}  /* 相对屏幕必填写 */

　　　　/*.maxbox{width: 500px;height: 500px;background-color:pink;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);} 选其一*/

　　　　.maxbox{width: 500px;height: 500px;background-color:pink;position:relative;top:50%;left:50%;margin:-250px 0 0 -250px;}

　　　　.maxbox div{width: 200px;height: 200px;background-color:red;position:absolute;top:50%;margin-top:-100px;left:0;}

    </style>

    <body>

            <div class="maxbox">

                <div></div>

            </div>

    </body>

</html>

position relative top失效的问题,温习下常用两种的居中方式的更多相关文章

  1. Asp.Net Core下的两种路由配置方式

    与Asp.Net Mvc创建区域的时候会自动为你创建区域路由方式不同的是,Asp.Net Core下需要自己手动做一些配置,但更灵活了. 我们先创建一个区域,如下图 然后我们启动访问/Manage/H ...

  2. linux 下的两种软件安装方式 —— 源码（编译、安装），编译好的二进制（直接安装）

    我们以 GPG(加密工具)为例来说明两种安装方式的区别: 源码(Source code releases,名称中则会含有src等说明信息,tarball:source),先编译再安装 GPU 的源码地 ...

  3. ASP.NET MVC下的四种验证编程方式[续篇]

    在<ASP.NET MVC下的四种验证编程方式>一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式("手工验证"."标注Validation ...

  4. ASP.NET MVC下的四种验证编程方式

    ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效性,我们将针对参数的验证成为Model绑定 ...

  5. ASP.NET MVC下的四种验证编程方式[续篇]【转】

    在<ASP.NET MVC下的四种验证编程方式> 一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式(“手工验证”.“标注ValidationAttribute特性”.“ ...

  6. ASP.NET MVC下的四种验证编程方式【转】

    ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效 性,我们将针对参数的验证成为Model绑 ...

  7. android环境下两种md5加密方式

    在平时开发过程中,MD5加密是一个比较常用的算法,最常见的使用场景就是在帐号注册时,用户输入的密码经md5加密后,传输至服务器保存起来.虽然md5加密经常用,但是md5的加密原理我还真说不上来,对md ...

  8. Linux 下的两种分层存储方案

    背景介绍 随着固态存储技术 (SSD),SAS 技术的不断进步和普及,存储介质的种类更加多样,采用不同存储介质和接口的存储设备的性能出现了很大差异.SSD 相较于传统的机械硬盘,由于没有磁盘的机械转动 ...

  9. Linux下的两种磁盘分区工具的使用

    如何使用fdisk和parted分区工具来进行硬盘分区,下面我来说一下在Linux系统中这两种硬盘分区工具的使用方法:     ----------fdisk分区工具----------       ...

随机推荐

  1. Sql server 存储过程批量插入若干数据。

    测试时,经常需要生成大量数据来测试系统性能,此功能可以用存储过程快速生成. 1. 随机生成日期 DECLARE @Date_start datetime DECLARE @Date_end datet ...

  2. 了解一下UTF-16

    1)先啰嗦一下 UTF-16是一种编码格式.啥是编码格式?就是怎么存储,也就是存储的方式. 存储啥?存二进制数字.为啥要存二进制数字? 因为Unicode字符集里面把二进制数字和字符一一对应了,存二进 ...

  3. python pymssql 连接数据库

    1)写在前面 远程连接数据库的时候,端口前面都是用的逗号, 因为惯性思维, 就傻傻的把    ip+,+端口 赋值给server了,然后一直报错, pymssql.InterfaceError: Co ...

  4. jsp无法访问

    一直无法访问jsp: 由于Spring boot使用的内嵌的tomcat,而内嵌的tamcat是不支持jsp页面的,所有需要导入额外的包才能解决. <!-- 解决jsp无法访问 --> & ...

  5. 【Alpha版本】冲刺阶段——Day7

    [Alpha版本]冲刺阶段--Day7 阅读目录 今日进展 今日贡献量 贡献量汇总 TODOList 及项目燃尽图 [今日进展] 将项目源文件打成jar包,并运行测试 完成答辩ppt 项目运行情况 主 ...

  6. [转载]图解程序员必须掌握的Java常用8大排序算法

    这篇文章主要介绍了Java如何实现八个常用的排序算法:插入排序.冒泡排序.选择排序.希尔排序 .快速排序.归并排序.堆排序和LST基数排序,分享给大家一起学习. 分类1)插入排序(直接插入排序.希尔排 ...

  7. spring总结之一（spring开发步骤、bean对象的管理、bean生命周期）

    ###spring 1.概念:开源,轻量级,简化开发的企业级框架. 开源:免费,发展快. 轻量级:占内存小. 简化开发:通用的功能封装,提高程序员的开发效率.--------------------- ...

  8. Aria2 使用手札（简易部署 + 快速进阶）

    没错,又是受够了迅雷.旋风的各种奇葩减速(哥哥我还买了了VIP!),IDM 对协议支持又太少还有事没事提示你不是正版三天两头闹着要更新.于是我想起来之前看到过的 Aria2,虽然之前也只是略有耳闻,但 ...

  9. fjwc2019 D1T1 全连（dp+树状数组）

    #178. 「2019冬令营提高组」全连 显然我们可以得出一个$O(n^2)$的dp方程 记$f(i)$为取到第$i$个音符时的最大分数,枚举下一个音符的位置$j$进行转移. 蓝后我们就可以用树状数组 ...

  10. SolrCloud集群配置

    前提: 1,已经做好zookeeper集群或伪集群配置. 2,已将solr部署到tomcat中 接下来,我们将zookeeper与tomcat进行关联 vim tomcat/bin/catalina. ...