如何让一个DIV水平,垂直方向都居中于浏览器?
<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水平,垂直方向都居中于浏览器?的更多相关文章
- Android RecyclerView(瀑布流)水平/垂直方向分割线
Android RecyclerView(瀑布流)水平/垂直方向分割线 Android RecyclerView不像过去的ListView那样随意的设置水平方向的分割线,如果要实现Recycle ...
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...
- CSS居中问题:块级元素和行级元素在水平方向以及垂直方向的居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...
- 一个Div在BOdy中上下左右居中
在body中让一个DIv居中 上下左右 <body> <div style=" width:800px; height:500px; position:absolute; ...
- 【原】用css让一个容器水平垂直
这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下. 这种方法比较多,本文只总结其中的几种,以便加深印象. 效果图都为这个: 方法一:position加mar ...
- css 元素水平垂直方向居中
html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...
- CSS div水平垂直居中和div置于底部
一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...
- 如何让一个div水平和垂直居中对齐
以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...
- DIV水平垂直布局
<%@ page language="java" pageEncoding="utf-8" import="java.util.*,com.ta ...
随机推荐
- linux部署服务器遇到tomcat already start
linux部署服务器遇到tomcat already start 前言,之前做了个汽车停车计费的后端,然后现在需要部署到服务器.正常部署,使用secureFx找到所属webapps目录,将文件上传.然 ...
- 《精通c#(第6版)》【PDF】下载
图灵程序设计丛书:精通C#(第6版)是C#领域久负盛名的经典著作,深入全面地讲解了C#编程语言和.NET平台的核心内容,并结合大量示例剖析相关概念.全书分为八部分:C#和.NET平台.C#核心编程结构 ...
- 探索C++对象模型
只说C++对象模型在内存中如何分配这是不现实的,所以这里选择VS 2013作为调试环境具体探讨object在内存中分配情况.目录给出了具体要探讨的所有模型,正文分标题依次讨论.水平有限,如有错误之处请 ...
- 贪心算法——Fence Repair(POJ 3253)
题目描述 农夫约翰为了修理栅栏,要将一块很长的木板切割成N块.准备切成的木板长度为L1,L2,L3--LN,未切割前木板的长度恰好为切割后木板长度的总和.每次切断木板时,需要的开销为这块木板的长度.请 ...
- 命令行执行Django脚本的方法
update.py import os import sys import django sys.path.append(r'C:\Users\Administrator\PycharmProject ...
- Java Web高级编程(二)
使用会话维持状态 一.会话 为了实现关联同一个用户端的多个请求和这些请求之间数据的共享,需要用到会话,会话用于维持请求和请求之间的状态.从服务器的角度,当用户的Web浏览器打开第一个链接到服务器的套接 ...
- Head First设计模式之目录
只有沉淀.积累,才能远航:沉沉浮浮,脚踏实地. 这本书已经闲置了好久,心血来潮,决定写个目录,让自己坚持看完这本书 创建型模式 抽象工厂模式(Abstract factory pattern): 提供 ...
- 微信小程序之页面路由
路由方式 简介 对于路由的触发方式以及页面生命周期函数如下: 路由方式 触发时机 路由前页面 路由后页面 初始化 小程序打开的第一个页面 onLoad, onSHow 打开新页面 调用 API w ...
- python中输出内容颜色得控制
参考:http://www.jb51.net/article/51237.htm 颜色代码 1)代码列表 格式:\[显示方式;前景色;背景色m 说明: 前景色 背景色 颜色 ------------- ...
- TPYBoard—MicroPython开发板免费试用!你最想抱走哪款?
TPYBoard开发板自上市开售以来,受到了广大硬件及MicroPython爱好者的一致好评,许多人提出想试用开发板的申请.为此,TPYBoard特推出多款开发板免费试用活动,感兴趣的朋友抓紧申请吧! ...