因为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. 使用JFileChooser实现在指定文件夹下批量添加根据“数字型样式”或“非数字型样式”命令的文件夹

    2018-11-05 20:57:00开始写 Folder.java类 import javax.swing.JFrame; import javax.swing.JPanel; import jav ...

  2. mysql 创建用户，删除用户，增加权限

    1,查询mysql 数据库已经存在的用户: SELECT USER,HOST FROM MYSQL.USER; 2,创建mysql 用户: '; USERNAME:用户名 HOST:主机,PASSWO ...

  3. ID3决策树

    决策树 优点:计算复杂度不高,输出结果易于理解,对中间值的缺少不敏感,可以处理不相关特征数据 缺点:过拟合 决策树的构造 熵:混乱程度,信息的期望值 其中p(xi)是选择分类的概率 熵就是计算所有类别 ...

  4. 邮件服务器hMailServer管理工具hMailServer Administrator汉化（转）

    //实现:邮件服务器hMailServer管理工具hMailServer Administrator的汉化 //环境: Windows Server 2008 R2 hMailServer Admin ...

  5. TCP客户端图片上传服务端保存本地示例

    //TCP客户端public class TCPClient { public static void main(String[] args)throws IOException { Socket s ...

  6. ClassTwo__HomeWork

    1,素数输出 设计思路声明两个函数分别用来实现输出任意两个数之间所有的素数和任意两个数之间最大最小的十个素数 方法一:一个数的因子不会大于它本身的开方; 方法二:创建一个数组来储存素数并输出最大最小的 ...

  7. MySQL性能测试工具sysbench的安装和使用

    sysbench是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有MySQL.Oracle和PostgreSQL.当前 ...

  8. 搭建Vue2+Vuex+Webpack+Pug(jade)+Stylus环境

     一.开发环境配置 开始之前,假设你已经安装了最新版本的 node 和 npm. 全局安装 vue-cli 和 webpack : npm install vue-cli webpack -g 创建工 ...

  9. socket聊天的业务逻辑

        一.主要思想:     1.如果用户A想要发消息给用户B,A需要将消息发送到一个服务器上,服务器接收到A发送的消息之后,再把消息发送给B,B接收到消息     2.当用户B断开连接时服务器不会 ...

  10. ubunta_django_install

    sudo apt-get install python-pip sudo apt-get install python-virtualenv #安装本地虚拟环境管理工具 mkdir ~/django ...