如何让一个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 ...
随机推荐
- 【java设计模式】【结构模式Structural Pattern】装饰模式Decorator Pattern
public class Client { public static void main(String[] args) { Component component=new ConcreteCompo ...
- UITextFiled的输入框改成一条下划线
在一些程序的界面中,它们的编辑框是一条线,而UITextFiled本身并没有这种style,所有需要我们自己设置.方法还是挺多的 第一种 , (1).我们可以声明一个类继承与UITextFiled ( ...
- iOS ShareSDK 三方分享/登录使用
原文 http://www.cnblogs.com/CoderAlex/p/4860352.html 一: 快速集成 1.前言 作为现在App里必不可少的用户分享需要,社交化分享显然是我们开发app里 ...
- mouseout、mouseover和mouseleave、mouseenter区别
今天在使用鼠标事件时,用错了mouseout,于是做个测试总结. 结论: mouseenter:当鼠标移入某元素时触发. mouseleave:当鼠标移出某元素时触发. mouseover:当鼠标移入 ...
- 解题思路:house robber i && ii && iii
这系列题的背景:有个小偷要偷钱,每个屋内都有一定数额的钱,小偷要发家致富在北京买房的话势必要把所有屋子的钱都偷了,但是屋子之内装了警报器,在一定条件下会触发朝阳群众的电话,所以小偷必须聪明一点,才能保 ...
- NOI2009 植物大战僵尸
啊一道好题感觉写得挺爽的啊这题这种有一点懵逼然后学了一点东西之后很明朗的感觉真是好!预处理参考 :http://www.cppblog.com/MatoNo1/archive/2014/11/01/1 ...
- C#序列化总结
贴一下自己序列化的代码: public class XMLUtil { /// <summary> /// XML & Datacontract Serialize & D ...
- Python-String字符串的相关方法
- 1、opencv-2.4.7.2的安装和vs2010的配置
参考大牛们的资料,动手操作了一遍,不算太复杂,和vs2008不同,有几点需要注意,cv2.4.7.2版本没有vc9,所以无法在2008上使用(呵呵,我瞎猜的) 1.下载安装 下载http://sour ...
- Anti-pattern/反模式
常见的与"直觉"相背离的anti-pattern产生的实际原因是没有深入.全面地考虑问题,即只关注到自己关心的方面,忽略了其他重要的.起相反作用的因素. 所以这个"直 ...