实现效果

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

代码

<!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. maven入门-- part1 简介

    Maven是什么 maven是基于项目对象模型(pom:project object model),可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具.对依赖关系的特性进行细致的分析和划 ...

  2. JAVA语言程序设计课后习题----第三单元解析（仅供参考）

    1 本题水题,记住要知道输入格式即可 import java.util.Scanner; public class test { public static void main(String[] ar ...

  3. MySQL计算两个日期相差的天数、月数、年数

    MySQL自带的日期函数TIMESTAMPDIFF计算两个日期相差的秒数.分钟数.小时数.天数.周数.季度数.月数.年数,当前日期增加或者减少一天.一周等等. SELECT TIMESTAMPDIFF ...

  4. TCP中异常关闭的情况记录

    1.当TCP连接的对端进程已经关闭了Socket的情况下,本端进程再发送数据时,第一包可以发送成功(但会导致对端发送一个RST包过来):之后如果再继续发送数据会失败,错误码为“10053: An es ...

  5. mysql数据库：mysql增删改、单表、多表及子查询

    一.数据增删改 二.单表查询 三.正表达式匹配 四.多表查询 五.子查询       一..数据增删改     增加  insert [into] 表名[(可选字段名)] values(一堆值1),( ...

  6. 第三方库-正则re

    Python正则表达式里的单行re.S和多行re.M模式 Python 的re模块内置函数几乎都有一个flags参数,以位运算的方式将多个标志位相加.其中有两个模式:单行(re.DOTALL, 或者r ...

  7. httpleaks及url的小技巧（http:evil）

    HTTP Leak攻击简介 当前Web技术下包含了大量HTML元素和属性,这些HTML元素和属性会请求一些外部资源,而在它们的HTTP请求过程中,可能存在潜在的敏感信息泄露.为此,德国著名网络安全公司 ...

  8. SpringBoot 如何实现自动配置

    SpringMVC 和 SpringBoot 都是基于Spring的,两者推出的时间相差不大,只不过是SpringMVC推出早点. 关于两者,最近看到一个比较通俗的讲法: Spring 最初利用“工厂 ...

  9. for update的作用和用法

    一.for update定义 for update是一种行级锁,又叫排它锁,一旦用户对某个行施加了行级加锁,则该用户可以查询也可以更新被加锁的数据行,其它用户只能查询但不能更新被加锁的数据行．如果其它 ...

  10. Java-CharTools工具类

    package com.gootrip.util; import java.io.UnsupportedEncodingException; /** * <p>Title:字符编码工具类 ...