如何让DIV始终保持在屏幕中间

    

公式:

宽=屏幕宽度的一半-盒子宽度一半高=屏幕高度一半-盒子高度一半

 
时间: 2024-08-06 21:22:40

如何让DIV始终保持在屏幕中间的相关文章

html之div始终停留在屏幕中间部分

需求: 使得某一个div始终停留在屏幕中间 实现: Html代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

将一个div始终定位在屏幕中心

//div的id为box #box{ width:200px; heighti:200px; border:1px solid #f00; //重点是以下规则 position:absolute; top:0px; left:0px; bottom:0px; right:0px; margin:auto; }

JQuery 弹出层,始终显示在屏幕正中间

1.让层始终显示在屏幕正中间: 样式代码: Html代码   .model{ position: absolute; z-index: 1003; width:320px; height:320px; text-align:center; background-color:#0066FF; display: none; } jQuery代码: Js代码   //让指定的DIV始终显示在屏幕正中间 function letDivCenter(divName){ var top = ($(windo

让div撑满整个屏幕的方法(css)

在body只有一个div的时候,可以通过这样的方式让div撑满整个屏幕. 1.给div设置定位. 复习一下-- css中position有五种属性: static:默认值,没有定位 absolute:绝对定位,相对于父级元素进行定位 relative:相对定位 fixed:固定定位,相对于浏览器窗口进行定位 inherit:从父元素继承定位信息 除了默认值static和inherit之外,添加其他三种都可以实现窗口自适应. 代码如下: 1 <style> 2 *{ 3 margin: 0; 4

css 实现DIV水平垂直居中于屏幕

原文地址: http://www.manongjc.com/article/374.html css如何将div实现全屏水平垂直居中,本章节介绍一下如何将一个div元素在整个网页内实现水平垂直居中效果,代码是最有说服力的,直接看代码. 代码如下: <!DOCTYPE html> <html> <head> <title>css 实现DIV水平垂直居中于屏幕</title> <style type="text/css"&g

设置一个DIV块固定在屏幕中央(两种方法)

设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } </style> <!doctype html> <html lang="zh-cn"> <head> <meta charset="UT

设置竖直的分割符【使用div】 (根据屏幕的大小自适应)

分割符的设置: <div id="separator" style="float:left; width:1px;  min-height:100% ; background:#808080;  overflow:hidden" ></div> style 设置: <style type="text/css"> body,html{ margin:0; padding: 0; height: 100%; } &

html DIV始终垂直居中的半透明弹出层特效源代码下载

html DIV始终垂直居中的半透明弹出层特效 原文:html Div层的展开与收缩的特效源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463332846592.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

设定div始终居中显示

<script type="text/javascript"> (function($){ $.fn.extend({ center:function(options){ //center插件 var options=$.extend({ //默认属性值 inside:window, //元素居于窗体中心 transition:0, //元素居中移动时的时间,单位是millisecond minX:0, //元素最小X方向距边值 minY:0, //元素最小Y方向距边值 w