文档章节

让层水平垂直居中页面的两种方法

webxiaohua
 webxiaohua
发布于 2015/04/14 22:21
字数 318
阅读 8
收藏 0

让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的。(页面设置height:100%;是无效的),这里使用绝对定位+负外边距的方式来实现垂直居中,但同时要考虑页面重置大小的情况,需要使用js来修正。

1、让层水平居中

.className{    
width:270px;    
height:150px;    
margin:0auto;
}
使用margin:0 auto;让层水平居中,留意宽度和高度必不可少。

2、让层垂直居中

.className{    
width:270px;    
height:150px;    
position:absolute;    
left:50%;    
top:50%;    
margin:-75px 0 0 -135px;
}
将层设置为绝对定位,left和top为50%,这时候使用负外边距,负外边距的大小为宽高的一半。

3、在重置窗体的时候层依旧保持居中

$(document).ready(function(){                          
$(window).resize(function(){   
$('.className').css({   
position:'absolute',   
left:($(window).width()- $('.className').outerWidth())/2,
top:($(window).height()- $('.className').outerHeight())/2
});
});  
$(window).resize();});
这里用到的jquery的方法。
resize()事件:当在窗体重置大小时触发。
outerWidth():获取第一个匹配元素外部宽度(默认包括补白和边框)。

© 著作权归作者所有

共有 人打赏支持
webxiaohua
粉丝 10
博文 44
码字总数 29786
作品 0
普陀
程序员
私信 提问
如何让DIV水平和垂直居中

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中,我将给大家讲述如何用...

ForingY
2016/06/26
11
0
用div+css实现水平垂直居中

以前我们做网页布局时要实现页面水平垂直居中的方法需要用js代码来实现。这样故然是一种好的方法,但是对于js 代码不懂的不熟的朋友来说也是比较困难的。今天我们就来讲一下如何用div+css实现...

oecp
2011/07/12
0
0
CSS 如何使DIV层水平居中

CSS 如何使DIV层水平居中 DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实...

Z_dragon
2014/08/18
0
0
CSS整理(3)之让元素水平居中和垂直居中方法

在html页面中,为了排版上的美观或是在不同尺寸的屏幕上正常显示,我们一般都会将元素进行水平居中或是垂直居中,现在 做一下总结: 实现水平居中: 对于行内元素来说,直接对要设置的元素设...

hyz000
2016/03/29
33
0
16种方法实现水平居中垂直居中

熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题. 水平居中 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素...

tomzhangto
2017/12/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Git工作原理

git跟传统的代码管理器(如svn)不同, 主要区别在于git多了个本地仓库以及缓存区,所以即使无法联网也一样能提交代码。 术语解释: 工作区间: 即我们创建的工程文件, 在编辑器可直观显示;...

Lienson
5分钟前
0
0
MySQL驱动对应Server版本、JDK版本

昨日生产上线,临时升级MySQL版本,导致连接不上。 应用JDK版本1.5 测试环境MySQL版本5.7 驱动版本5.1.40.jar 正常 生产环境MySQL版本8.0 驱动版本5.1.40.jar 连接不上 生产环境MySQL版本8.0...

zcjlq
7分钟前
1
0
千万级规模【高性能、高并发】互联网架构经验分羹

架构以及我理解中架构的本质 在开始谈我对架构本质的理解之前,先谈谈对今天技术沙龙主题的个人见解,千万级规模的网站感觉数量级是非常大的,对这个数量级我们战略上 要重 视 它 , 战术上又...

java知识分子
8分钟前
0
0
重磅!阿里巴巴工程师获得 containerd 社区席位,与社区共建云时代容器标准

重磅!阿里巴巴工程师获得 containerd 社区席位,与社区共建云时代容器标准 11 月 29 日,CNCF containerd 社区正式宣布:两位阿里巴巴工程师正式获得 containerd 社区席位,成为 containerd...

阿里云官方博客
9分钟前
0
0
你会用哪些JavaScript循环遍历

总结JavaScript中的循环遍历 定义一个数组和对象 const arr = ['a', 'b', 'c', 'd', 'e', 'f'];const obj = { a: 1, b: 2, c: 3, d: 4} for() 经常用来遍历数组元素 遍历值为数组...

peakedness丶
10分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部