实现效果

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

代码

<!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. wabacus JaveEE开发框架

    http://www.wabacus.org/ css学习网站:http://www.divcss5.com/rumen/r422.shtml

  2. Linux系统目录结构和文件基本属性

    一.Linux系统目录结构 二.Linux 文件基本属性 三.touch stat tar 命令 一.Linux系统目录结构 不同颜色文件的含义: inux 文件颜色的含义,蓝色代表目录,绿色代表可执 ...

  3. PyCharm 创建指定版本的 Django （超详细图解）

    最近在学习胡阳老师(the5fire)的<Django企业级开发实战>,想要使用pycharm创建django项目时,在使用virtualenv创建虚拟环境后,在pycharm内,无论如何 ...

  4. 2019-11-29-解决从旧格式的-csproj-迁移到新格式的-csproj-格式-AssemblyInfo-文件值重复问题...

    title author date CreateTime categories 解决从旧格式的 csproj 迁移到新格式的 csproj 格式 AssemblyInfo 文件值重复问题 lindex ...

  5. Windows问题

    常用工具 DisplayFusion 官网 电脑分屏,V9.4 Pro 破解版 问题解决 Win64位注册表导入方法 64位Windows操作系统注册表不同于32位Windows操作系统,Win64 ...

  6. Jenkins升级版本

    1 Jenkins的管理界面,下载最新版本的war包 2 找到自己部署Jenkins的war包的tomcat目录,替换最新的war包,重启tomcat即可 只需要把之前的war包重命名一个名字,不要以 ...

  7. three.js之正投影摄像机与透视投影摄像机的区别

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 8.1.Zookeeper概念简介

    1.分布式系统概述 理解1: 分布式系统:分布式系统是针对一个大系统而言,将一个大系统分成多个子系统,即多个工程系统. 我们先看下传统的系统模式:    传统的系统模式将多个功能模块全部在一个工程中写 ...

  9. netty-2.客户端与服务端互发消息

    (原) 第二篇,客户端与服务端互发消息 与第一篇的例子类似,这里服务端需要三个类,客户端也需要三个类. 服务端关键代码如下:MyServer与上一个例子中的TestServer 差多,这里只列举不同的 ...

  10. Linux用户账号文件——passwd

    /etc/passwd文件是UNIX安全的关键文件之一.该文件用于用户登录时校验用户的登录名.加密的口令数据项.用户ID(UID).默认的用户组ID(GID).用户信息.用户主目录以及登录后使用的sh ...