因为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. c# 图像呈现控件PictureBox

    在c#中可以使用PictureBox控件来呈现图像,图像资源可以来自文件,也可以是存在内存中的位图对象.可以显示本地图像文件或来自网络的图片,也可以来自项目文件中的图像. 从URI加载图像文件. 调用 ...

  2. Markdown编辑器使用说明

    Markdown编辑器使用说明 #编辑器使用说明编辑器仅用来编辑文章的样式,建议在其他文档中写好内容,再复制到此处编辑样式--- ## 编辑器使用介绍—非开发者 非开发者,可以将编辑框内容全部删掉,使 ...

  3. 基于EOS开发的Dapp大全

    基于EOS开发的Dapp大全 截止20180424,基于EOS开发的项目在50,很多项目的规划信息还不完善,搜集了基本的信息,供大家参考. ==========================长期囤币 ...

  4. ELKF安装使用教程。elasticsearch+logstash+kibana+filebeta。

    近期因工作需要学习了ELKF的安装和使用.网络上的中文我看大部分也比较老版本了,我想写一下,希望能给他人带来一点帮助.小弟不才,有错位之处,还请大家原谅指点. ELKF就是:elasticsearch ...

  5. mysql 2

    mysql索引原理 初识索引 为什么要索引?    加速查询   读写比10:1左右 什么是索引?       索引在MySQL中也叫是一种“键”,是存储引擎用于快速找到记录的一种数据结构. 索引是应 ...

  6. urlopen和urlretrieve

    import urllib import re url = "https://www.duitang.com/search/?kw=%E9%AC%BC%E6%80%AA&type=f ...

  7. 计蒜客---N的-2进制表示

    对于十进制整数N,试求其-2进制表示. 例如,因为  1*1  +  1*-2  +  1*4  +  0*-8  +1*16  +  1*-32  =  -13  ,所以(-13)_10  =  ( ...

  8. POJ 3662 Telephone Lines （二分 + 最短路）

    Farmer John wants to set up a telephone line at his farm. Unfortunately, the phone company is uncoop ...

  9. （2018干货系列十一）最新iOS学习路线整合

    怎么学iOS iOS是由苹果公司开发的移动操作系统,以xcode为主要开发工具,具有简单易用的界面.令人惊叹的功能,以及超强的稳定性,已经成为iPhone.iPad 和iPod touch 的强大基础 ...

  10. 洛谷 P2799 国王的魔镜

    把项链当做字符串输进去,可以用gets #include<iostream>#include<cstdio>#include<cmath>#include<c ...