实现效果

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

代码

<!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. var正在声明变量

    var正在声明变量也可以直接分配一个变量,而不在JS中声明它,但是这种变量在默认情况下是全局的.<!-/->是HTML中的注释,在JS中不起作用.它只是用来忽略无法识别脚本的浏览器的脚本内 ...

  2. maven 父子工程打包 并且上传linux服务器

    先对父工程进行 mvn clean 再对子工程执行 install wagon:upload-single wagon:sshexec 使用wagon前提: 本地maven 的settings.xml ...

  3. docker容器里面安装php的redis扩展

      docker exec -i -t php /bin/bash 进入php容器内执行:pecl install -o -f redis  修改php.ini,添加:extension=redis. ...

  4. MySQL8.x msi版安装教程

    一.下载MySQL 官网下载地址 https://dev.mysql.com/downloads/windows/installer/8.0.html  下载第二个即可(虽然只有32位的 但是会同时安 ...

  5. Oracle【子查询】

    Oracle子查询:当一个查询依赖于另外一个查询的结果的时候,就需要使用子查询.单行子查询 :筛选条件不明确,需要执行一次查询且查询结果只有一个字段且字段值只有一个.注意:where子句中允许出现查询 ...

  6. 08-【jsp重点】

    jsp的四个作用域和9个内置对象 jsp内置对象[重点]:pageContext.request.session.application.response.out.page.exception.con ...

  7. 建立一个可以不停地接收客户端新的连接,但不能处理复杂的业务的C/S网络程序

    在Windows平台上主要有两个版本的Socket Api函数:WinSock 1.1和WinSock 2.2 , 2.2版本默认兼容1.1版本,1.1 winsock.h wsock32.lib w ...

  8. Linux根文件系统和目录结构及bash特性1

    Linux文件系统:    内核并不真正负责具体的工作,这些工作是应用程序来负责的    Linux glibc    程序的编译方式:        动态链接式编译:        静态链接式编译: ...

  9. codeforces Educational Codeforces Round 65 (补完)

    C News Distribution 并查集水题 D Bicolored RBS 括号匹配问题,如果给出的括号序列nesting depth为n,那么最终可以分成两个nesting depth为n ...

  10. Web Api(4)

    参考原文链接https://www.cnblogs.com/JamelAr/,本文大部分内容是根据这位博主进行实验测试的,非常感谢分享,另外也参考了https://www.cnblogs.com/vi ...