浏览器屏幕上显示的块级元素居中

原创 2016年06月01日 20:51:49
1、首先知道整个屏幕的高度和宽度
 获得屏幕的宽度和高度:    
 alert(document.documentElement.clientWidth);    
  alert(document.documentElement.clientHeight);

2、居中则要设置块级元素的top 、left 值
则需先将块级元素设置成绝对定位,绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。假设块级元素的width:350px height:250px
然后计算left = (document.documentElement.clientWidth - 350) / 2;

top= (document.documentElement.clientHeight - 250) / 2;

封装居中函数库 以及浏览器大小改变函数:
//设置物体居中
Base.prototype.center = function(width,height){
	var left = (document.documentElement.clientWidth - width) / 2;
	var top = (document.documentElement.clientHeight - height) / 2;
	for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].style.top = top + 'px';
        this.elements[i].style.left = left + 'px';
    }
	return this;
}

//出发浏览器窗口事件
Base.prototype.resize = function(fn){
	window.onresize = fn;
	return this;
}
假设现有一个div块级元素的宽350px 高250px;
html代码:
<div id="login">
	<h2><img src="img/close.png"alt="" class="close">网站登录</h2>
	<div class="user">账号:<input type="text" name="user" class="text" /> </div>
	<div class="pass">密码:<input type="password" name="pass" class="text" /></div>
	<div class="button"><input type="button" class="submit" value=""/> </div>
	<div class="other">注册新用户  |  忘记密码?</div>
</div>

css代码:
 #login{
 	width:350px;
 	height:250px;
 	border:1px solid #ccc;
 	position: absolute;
 }


采用封装后的函数调用实现块级元素一直居中:
var login = $().getId("login");   //简化代码
	login.center(350,250).resize(function(){
		login.center(350,250);
	});



















块级元素以及行内元素居中显示

方法一:利用绝对定位实现元素垂直,水平居中显示: *{ margin: 0; padding: 0; ...

定宽定高情况下块级元素居中的方法

定宽定高情况下元素居中的方法 居中元素定宽定高情况 .father{ width: 500px; height: 500px; border:1px sol...

不定高宽的块级元素居中的方法

二、不定高宽的元素居中的方法 不定宽高情况下的居中方法 1、水平居中 方法一: 父层:text-align:center; 子层: display:inline-block; //...

不确定宽度的块级元素的水平居中三方法

ul{list-style:none;margin:0;padding:0;} table{margin:0 auto;} .test li{float:left;display:inline;mar...

CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)

http://www.w3school.com.cn/htmldom/prop_style_verticalalign.asp(W3C标准,概念不清的看手册很重要哦)       ...

总结最近看到的关于块级元素、居中的问题

(一)行内元素与块级函数的三个区别 1.行内元素与块级元素直观上的区别 行内元素会在一条直线上排列,都是同一行的,水平方向排列 块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 ...

用position:relative和float实现不定宽块级元素的居中

分析使用position:relative和float实现不定宽块级元素的居中
  • amghost
  • amghost
  • 2015年09月20日 12:31
  • 1405

css 不定宽度的块级元素水平居中

块级元素水平居中不能用text-align:center 但是有一种错觉如下 不定宽块状元素水平居中 .div1{ margin-top: 100px; border:2p...

CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)

http://www.w3school.com.cn/htmldom/prop_style_verticalalign.asp(W3C标准,概念不清的看手册很重要哦)       首先,依旧是概念...
  • Jt1123
  • Jt1123
  • 2013年12月27日 09:26
  • 1995

水平居中块级元素

如上图所示,要做图中黄色区域的到期提醒,要求提醒的内容(提醒的内容是指黄色背景上的图标和文字)居中显示。  我将图中的惊叹号标识做为提醒内容的背景图片处理, 而这就要求内容区有一个高度,所以内容区必须...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浏览器屏幕上显示的块级元素居中
举报原因:
原因补充:

(最多只允许输入30个字)