实现效果

不论窗口尺寸,都可以垂直和水平居中。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中效果</title>
<link href="style.css" rel="stylesheet">
<style type="text/css">
.warp {
width:0;
height:0;
position:fixed;
left:50%;
right:50%;
top:50%;
bottom:50%;
} .loginPanel {
width:500px;
height:400px;
margin-left:-250px;
margin-top:-200px;
background-color:#499ECA;
} </style>
</head>
<body>
<div class="warp">
<div class="loginPanel"> </div>
</div>
</body>
</html>

CSS效果——绝对居中的更多相关文章

  1. css中关于居中的那点事儿

    css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...

  2. css中各种居中的奇技淫巧总结

    css中各种居中的奇技淫巧总结   第一种,在固定布局中比较常用的技巧设置container的margin:0 auto:   第二种(从布局中入手)   css .outer{ height:200 ...

  3. css布局---各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  4. CSS中各种居中方法

    CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...

  5. CSS实现div居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. [转载] 高大上的 CSS 效果:Shape Blobbing

    这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 app ...

  7. CSS 效果汇总

    只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 sp ...

  8. CSS效果:这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  9. css 浮动元素居中

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

随机推荐

  1. SSIS 初次接触 + 开发记录

    第一次接触SSIS,昨天终于把一套流程走通,记一下流水. 1:安装 使用SSIS需要安装插件(VS 和Sql Server都需要另外安装). 自己使用的vs2017开发,官网有专门的 VS2017 安 ...

  2. ONNX源码安装

    ONNX是facebook提出的一个 Open Neural Network Exchange协议,能够让训练好的模型在不同的框架间进行交互. ONNX的安装相对来说不是特别麻烦,麻烦的是其依赖库的安 ...

  3. plist文件的归档,解档

    plist文件 plist的根Type只能是字典(NSDictionary)或者是数组(NSArray)所以归档时我们只能将数组或字典保存到plist文件中,但是NSString也能通过归档保存到pl ...

  4. 用NetHttpClient执行Post操作遇到的问题

    最近在做接口的调试,用NetHttpClient来进行相关操作.部分数据是用get方法来操作的,没有问题,但有个数据是用Post来操作的,始终报错,用了抓包分析工具发现没有发送数据出去.但找不出代码的 ...

  5. vue项目图标

    项目图标iconfont 网址:http://www.iconfont.cn

  6. 第七章· MySQL的存储引擎

    一.存储引擎简介 1.文件系统: 1.1 操作系统组织和存取数据的一种机制. 1.2 文件系统是一种软件. 2.文件系统类型:ext2 3 4 ,xfs 数据 2.1 不管使用什么文件系统,数据内容 ...

  7. Tomcat集成到MyEclipse

    1.Tomcat集成到MyEclipse 使用MyEclipse配置服务器后,就可以使用MyEclipse来启动和停止服务器了.当然,你需要先安装好服务器(Tomcat),才能配置.MyEclipse ...

  8. zabbix 监控TCP状态连接数

    1.zabbix客户端,监控TCP状态脚本,并保存到的定路径.(/usr/local/zabbix-agent/shells) # cat zabbix_linux_plugin.sh #!/bin/ ...

  9. phpMyAdmin出现Fatal error: Maximum execution time of 300 seconds

    在mysql用phpMyAdmin导入大数据的时候出现:Fatal error: Maximum execution time of 300 seconds exceeded in D:/查了很多文章 ...

  10. BZOJ4353 Play with tree[树剖]

    复习几乎考不到的树剖.维护min以及min个数,打set和add标记即可,注意set优先级优于add. #include<iostream> #include<cstdio> ...