<style type="text/css">
<!-- 
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
<div>让层垂直居中于浏览器窗口</div> 

其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写。

如何让一个DIV水平,垂直方向都居中于浏览器?的更多相关文章

  1. Android RecyclerView(瀑布流)水平/垂直方向分割线

     Android RecyclerView(瀑布流)水平/垂直方向分割线 Android RecyclerView不像过去的ListView那样随意的设置水平方向的分割线,如果要实现Recycle ...

  2. HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

    pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...

  3. CSS居中问题:块级元素和行级元素在水平方向以及垂直方向的居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...

  4. 一个Div在BOdy中上下左右居中

    在body中让一个DIv居中 上下左右 <body> <div style=" width:800px; height:500px; position:absolute; ...

  5. 【原】用css让一个容器水平垂直

    这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下. 这种方法比较多,本文只总结其中的几种,以便加深印象. 效果图都为这个: 方法一:position加mar ...

  6. css 元素水平垂直方向居中

    html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...

  7. CSS div水平垂直居中和div置于底部

    一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...

  8. 如何让一个div水平和垂直居中对齐

    以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...

  9. DIV水平垂直布局

    <%@ page language="java" pageEncoding="utf-8" import="java.util.*,com.ta ...

随机推荐

  1. Chef 自动化运维:开始“烹饪”

    在 Chef Workstation 上创建了一个 cookbook 之后,我们执行以下命令来进行测试: chef-client --local-mode --override-runlist fir ...

  2. APP安全--网络传输安全 AES/RSA/ECC/MD5/SHA

    移动端App安全如果按CS结构来划分的话,主要涉及客户端本身数据安全,Client到Server网络传输的安全,客户端本身安全又包括代码安全和数据存储安全.所以当我们谈论App安全问题的时候一般来说在 ...

  3. iOS iOS10 的适配问题

    其他:Xcode8 iOS10 的新特性 1.系统判断方法失效:2.隐私数据的访问问题:3.UIColor 问题4.真彩色的显示5.ATS问题6.UIStatusBar问题7.UITextField8 ...

  4. htpasswd 命令详解

    htpasswd参数 -c 创建passwdfile.如果passwdfile 已经存在,那么它会重新写入并删去原有内容. -n 不更新passwordfile,直接显示密码 -m 使用MD5加密(默 ...

  5. laravel and lumen 软删除操作

    知识都是有联系的,这绝对是真理.作为一名小白,看了一点官方文档,把我自己理解的软删除操作给大家讲讲.有些就是套用官方文档的话. 定义:什么是软删除呢,所谓软删除指的是数据表记录并未真的从数据库删除,而 ...

  6. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲(四大界面之间的跳转与玩家飞机的移动)

    一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3. ...

  7. java多线程(三)-Executors实现的几种线程池以及Callable

    从java5开始,类库中引入了很多新的管理调度线程的API,最常用的就是Executor(执行器)框架.Executor帮助程序员管理Thread对象,简化了并发编程,它其实就是在 提供了一个中间层, ...

  8. eml企业通讯录管理系统v5.0 存在sql注入

    0x00 前言 上周五的时候想练练手,随便找了个系统下载下来看看. 然后发现还有VIP版本,但是VIP要钱,看了一下演示站,貌似也没有什么改变,多了个导入功能?没细看. 搜了一下发现这个系统,压根就没 ...

  9. mysql分组查询前n条数据

    建表: CREATE TABLE hard(id INT,aa varchar(50) ,bb INT,PRIMARY key(id))insert into hard values(1,'a',9) ...

  10. 推荐!手把手教你使用Git(转载)

    转载地址http://blog.jobbole.com/78960/,涂根华的博客. Git基本常用命令如下: mkdir:         XX (创建一个空目录 XX指目录名) pwd:      ...