实现效果

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

代码

<!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. ubuntu16.04环境LNMP实现PHP5.6和PHP7.2

    最近因为公司突然间说要升级php7,所以做个记录 PPA 方式安装 php7.2 : sudo apt-get install software-properties-common 添加 php7 的 ...

  2. MySQL 安装与基本概念

    Mysql版本 第一条产品线:5.0.xx及升级到5.1.xx的产品系列,这条产品线继续完善与改进其用户体验和性能,同时增加新功能,这条路线可以说是MySQL早期产品的延续系列,这一系列的产品发布情况 ...

  3. Rectangle Puzzle CodeForces - 281C （几何）

    You are given two rectangles on a plane. The centers of both rectangles are located in the origin of ...

  4. 【未知来源】Randomized Binary Search Tree

    题意 求 \(n\) 个点的 Treap 深度为 \(h=0,1,2,\cdots,n\) 的概率. Treap 是一个随机二叉树,每个节点有权值和优先级,权值和优先级都是 \([0,1]\) 中的随 ...

  5. sql 181. 超过经理收入的员工

    Employee 表包含所有员工,他们的经理也属于员工.每个员工都有一个 Id,此外还有一列对应员工的经理的 Id. +----+-------+--------+-----------+| Id | ...

  6. MyBatis中<![CDATA[ ]]>的使用

    原文地址:https://www.cnblogs.com/catgatp/p/6403382.html <![CDATA[]]>和转义字符 被<![CDATA[]]>这个标记所 ...

  7. 生产问题之StackOverflowError异常小记

    印象中,这是项目中首次遇到 StackOverflowError,在此做个笔记. (吃饭回来写) …… 吃饭回来后,尝试把代码回退来分析异常产生原因,然而却无法复现这个栈溢出异常……醉了 有缘再见再写 ...

  8. 关于div的水平垂直居中

    水平垂直居中 一.未知宽高 1. table布局(display:table) 2. 转化为行内标签display:inline-block,借助另外一个标签高度来实现 3. 绝对布局(positio ...

  9. Hadoop-No.10之列簇

    HBase中包含列簇(column family)的概念.列簇本质上是列的存储容器.一张表可以有一个或多个列簇.每个列簇都有自己的HFile结婚,而且在执行合并操作时,同一个表的其他列簇不受影响 在很 ...

  10. 【ORACLE语句备份】数据库表同步 ——定时任务管理器（EXPDP导出，IMPDP导入）

    1.C:\Users\Administrator>sqlplus sys/xxx@xxx as sysdba; 2.SQL> create directory dbbak4 as 'e:\ ...