实现效果

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

代码

<!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. vue数组中数据变化但是视图没有更新解决方案

    原文链接:http://www.cnblogs.com/sufubo/p/6906261.html#undefined 问题:在vue项目中,我更改数组中的某一条数据,直接arr[i]=newVal ...

  2. Base64加密后有换行回车的解决办法

    据RFC 822规定,每76个字符,还需要加上一个回车换行 有时就因为这些换行弄得出了问题,解决办法如下,替换所有换行和回车 String bTemp = Base64.encodeBase64Str ...

  3. 基于Linux解决登录ssh客户端失败问题—sshd error: could not load host key

    当你ssh远程登录时,会发现ssh登录界面刚打开就会闪退,在查看主机日志消息中,就会看到如下错误: 然而问题的根源也就是这三个文件,无法正常加载ssh主机密钥. 而我们只需要将有问题的文件删除,然后重 ...

  4. Linux FTP 命令全集

    Linux FTP 命令全集 1 前言 下面就所有命令给出解释和例子. 说明:  1. remote-file 指远程文件,即服务器上的文件 2. local-file  指本地文件,即本地机器上的文 ...

  5. 延长zencart1.5.x后台的15分钟登录时间和取消90天强制更换密码

    延长zencart1.5.x后台的15分钟登录时间 打开includes\functions\sessions.php if (IS_ADMIN_FLAG === true) { if (!$SESS ...

  6. 异步消息处理机制相关面试问题-handler面试问题详解

    什么是handler? 这个异常应该也就是引出handler的原因,也就是默认在非UI线程中是无法去更新UI的东东滴,那到底什么上handler呢? handler通过发送和处理Message和Run ...

  7. MySQL in和limit不能连用的问题

    今天在mysql上处理一个数据量达到千万级的数据库表时,要取出满足条件的数据集,然后存入到mongo数据库,使用JPA提供的Pageble去拿分页,再用多线程去取数据时,发现刚开始效率还可以,肯定比单 ...

  8. Ruby2.0后版本的debug工具： byebug

    https://github.com/deivid-rodriguez/byebug/blob/master/GUIDE.md 安装: gem install byebug 使用: Rails: 直接 ...

  9. IntelliJ IDEA安装后几个重要的目录及配置文件讲解

    本文大概记录了IntelliJ IDEA安装之后比较重要的目录和几个核心文件 重要的安装目录 安装完之后的bin目录大致如下 IntelliJ IDEA 的安装目录并不复杂,上图为最常改动的 bin ...

  10. 在配置tensorflow时踩的无数个坑

    在下午尝试配置tensorflow环境时,遇到了许多天坑,讲真的心态炸了好几次,特此写下这篇记录,希望能给看到朋友一点帮助. 先说一下这抓狂的一天的起因,比赛项目想用SVM进行一下数据分析,除了常规的 ...