实现效果

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

代码

<!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. 如何解决Win10系统更新显示0x80080300代码的错误？

    Win10系统自推出以来就不断的在完善更新,其越来越丰富的功能也吸引了越来越多的用户.好系统Win10系统:https://www.vkebao.com/os/index_2.html但最近有用户反映 ...

  2. 语义分割之RefineNet

    背景介绍 近来年,深度卷积网络在目标检测方面取得了一定的成绩.但对于密集预测,仍存在一定不足,原因是频繁的卷积和池化导致最终的特征分辨率降低. 针对这个问题,目前主要采用两种方法:第一种:空洞卷积,如 ...

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

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

  4. 异步任务——AsyncTask的初步认识

    ProgressBar_test.class package com.example.administrator.ten_9; import android.app.Activity; import ...

  5. php的加解密openssl_encrypt与openssl_decrypt

    https://blog.csdn.net/zhemejinnameyuanxc/article/details/83383434   php的加解密

  6. 学习使用C语言实现线性表

    线性表是最常用且最简单的一种数据结构.一个线性表是n个数据元素的有限序列,序列中的每个数据元素,可以是一个数字,可以是一个字符,也可以是复杂的结 构体或对象.例如:1,2,3,4,5是一个线性表,A, ...

  7. 图片框住一个小视频 谈css padding百分比自适应

    今天市场提出活动页,活动页有一块内容是在一个手机背景图框里播放视频,网页是适配的,设计师只给我一张带有手机壳的背景图. 如果用JS画应该也是可以的,但一个简单的活动页没必要,快速实现用背景图调CSS最 ...

  8. Linux下使用telnet测试端口号是否开放

    telnet 127.0.0.1 80调用后,若提示bash: telnet: command not found,那么进行以下步骤: 1.检查telnet是否已经安装,或者有部分未安装: rpm - ...

  9. 第一次 CSP-S 的游记

    菜得很啊菜得很! --PinkRabbit 第一次 CSP-S ,真的是 第一次. 作为一名初三学生,虽然是 第一次 参加 和NOIP没有任何关系 的 CSP-S ,总是要有点目标呀. 第一试 因为是 ...

  10. c语言函数分析

    1.vc6的相关使用 1)常用的快捷键 f7    ->编译 f5    ->运行 f9    ->断点 f10    ->单步执行 f11    ->单步执行,可进入函 ...