文档章节

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

webxiaohua
 webxiaohua
发布于 2015/04/14 22:21
字数 318
阅读 8
收藏 0
点赞 0
评论 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
粉丝 9
博文 40
码字总数 25880
作品 0
普陀
程序员
如何让DIV水平和垂直居中

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

ForingY ⋅ 2016/06/26 ⋅ 0

用div+css实现水平垂直居中

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

oecp ⋅ 2011/07/12 ⋅ 0

CSS 如何使DIV层水平居中

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

Z_dragon ⋅ 2014/08/18 ⋅ 0

CSS整理(3)之让元素水平居中和垂直居中方法

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

hyz000 ⋅ 2016/03/29 ⋅ 0

16种方法实现水平居中垂直居中

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

tomzhangto ⋅ 2017/12/19 ⋅ 0

DIV垂直居中的各种方法

在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我...

alexian ⋅ 2010/10/28 ⋅ 0

CSS实现垂直居中的常用方法

作者:渔歌 网址:http://www.cnblogs.com/yugege/p/5246652.html 在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素...

数通畅联 ⋅ 2016/04/15 ⋅ 0

css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍 ⋅ 2013/08/08 ⋅ 0

关于CSS制作水平/垂直居中对齐问题

作为前端开发者,在制作Web页面时都有碰到CSS制作水平垂直居中的问题,我想大家都有研究过或者写过,特别是其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作水平/垂直居...

ACE-705 ⋅ 2014/05/07 ⋅ 0

CSS制作水平垂直居中对齐各种方法总结

标签: 杂谈 分类: 网页前端 方法一: 这种方法用来实现单行垂直居中是相当的简单的,你只要保证元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一...

未央花开 ⋅ 2014/04/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

数据结构与算法之双向链表

一、双向链表 1.双向链表的结点结构 typedef struct DualNode{ ElemType data; struct DualNode *prior; // 前驱结点 struct DualNode *next; // 后继结点}DualNode, *DuL...

aibinxiao ⋅ 22分钟前 ⋅ 0

五大最核心的大数据技术

大数据技术有5个核心部分,数据采集、数据存储、数据清洗、数据挖掘、数据可视化。关于这5个部分,有哪些核心技术?这些技术有哪些潜在价值?看完今天的文章就知道了。 大数据学习群:7165810...

董黎明 ⋅ 24分钟前 ⋅ 0

PhpStorm 头部注释、类注释和函数注释的设置

首先,PhpStorm中文件、类、函数等注释的设置在:setting-》Editor-》FIle and Code Template-》Includes下设置即可,其中方法的默认是这样的: /**${PARAM_DOC}#if (${TYPE_HINT} != "v...

nsns ⋅ 24分钟前 ⋅ 0

spring.net AOP

http://www.springframework.net/doc-latest/reference/html/aop-quickstart.html https://www.cnblogs.com/wujy/archive/2013/04/06/3003120.html...

whoisliang ⋅ 29分钟前 ⋅ 0

【HAVENT原创】创建 Dockerfile 生成新的镜像,并发布到 DockerHub

注意:Win7 与 Win10 的版本存在差异,Win7 版本使用 Docker Quickstart Terminal 进入控制台,Win10下面直接用管理员权限打开控制台或者 PowerShell 即可;另外 Win7 下面只能访问 C盘,/ap...

HAVENT ⋅ 29分钟前 ⋅ 0

pom.xml出现web.xml is missing ...解决方案

提示信息应该能看懂。也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了。 搜索了一下,Stack Overflow上的答案解决了问题,分享一下。 目前被顶次数最多的回答原文如下: This...

源哥L ⋅ 30分钟前 ⋅ 0

js时间戳与日期格式之间相互转换

1. 将时间戳转换成日期格式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己...

Jack088 ⋅ 35分钟前 ⋅ 0

web添加log4j

添加xml配置log4j.properties # Global logging configuration---root日志设置#log4j.rootLogger=info,dailyRollingFile,stdoutlog4j.rootLogger=debug,stdout,dailyRollingFile---......

黄柳淞 ⋅ 35分钟前 ⋅ 0

如何解决生产环境宕机问题

写在前面:该篇宕机问题的排查难度远比上一篇(记一次解决线上OOM的心路历程)大的太多,上一篇中内存泄漏的问题是有迹可循的,本次的宕机在业务日志上没有任何征兆,另外本文有许多值得深挖...

寰宇01 ⋅ 48分钟前 ⋅ 0

Redis查漏补缺:最易错过的技术要点大扫盲

作者介绍 孤独烟,中国平安研发工程师,目前负责规则云平台架构设计以及需求研发工作。毕业后一直从事Java开发工作,在Web开发、架构设计上有多年的实战经验。在MySQL性能优化、JVM调优、分布...

kim_o ⋅ 48分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部