`

用css或jquery方式 使div 水平、竖直均居中

阅读更多

 

.className{
	width:270px;
	height:150px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-75px 0 0 -135px;
}

 

jquery方法



$(document).ready(function(){
						   
 $(window).resize(function(){

  $('.className').css({
   position:'absolute',
   left: ($(window).width() 
     - $('.className').outerWidth())/2,
   top: ($(window).height() 
     - $('.className').outerHeight())/2
  });
		
 });
 
 // To initially run the function:
 $(window).resize();

});

 

  • 大小: 8.6 KB
1
1
分享到:
评论

相关推荐

    DIV+CSS水平垂直居中

    使用DIV+CSS实现水平垂直居中的优点是可以使网页布局更加灵活和灵活,可以根据需要随时调整DIV元素的位置和大小。此外,使用CSS样式还可以使网页更加美观和简洁。 四、DIV+CSS水平垂直居中的应用场景 DIV+CSS水平...

    DIV+CSS DIV居中布局

    设置`margin-left`和`margin-right`为`auto`,可以使`<div>`在父容器中水平居中。例如: ```css .centered-div { width: 200px; /* 元素的宽度 */ margin: 0 auto; /* 自动左右外边距实现居中 */ } ``` 2. **...

    div+css垂直居中和水平居中

    本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中,div元素作为布局容器广泛使用,而CSS则是样式控制的关键。我们将探讨不同情况下的居中策略,并结合给出的`juzhong.html`示例文件进行讲解。...

    绝对实用的DIV+CSS+JQUERY模板

    在CSS布局中,`div`经常作为布局的基本单位,通过设置`display`属性(如`block`或`flex`),可以实现流式、网格或自适应布局。 【网页模板】:网页模板是预先设计好的网页布局,通常包含头部、导航、主体内容、侧...

    div框水平垂直居中跟内容垂直居中.html

    div框水平垂直居中跟内容垂直居中

    div+css+jquery

    在网页设计和开发中,`div+css+jquery` 是一套常见的技术组合,用于构建现代、响应式的网页界面。下面将分别对这三个主要组件进行详细解释,并探讨它们如何协同工作来实现动态、交互式的效果。 1. **Div(Division...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    在网页开发中,jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用jQuery的`show()`、`hide()`、`...

    CSS网页布局DIV水平居中的各种方法

    在CSS网页布局中,使一个DIV元素水平居中是常见的需求,这有助于创建美观且响应式的网站设计。本文将详细探讨几种实现DIV水平居中的方法。 1. **使用`margin: 0 auto`** 这是现代浏览器中最常用的方法。通过设置...

    DIV+CSS 图片垂直居中效果

    在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`<div>`元素是一...

    DIV+CSS+JQUERY源码实例

    例如,可以使用<div>创建多列布局,用CSS控制每列的宽度和间距,再利用jQuery实现鼠标悬停时的动画效果: ```html <div class="column"> 图像"> 这是图像的描述。 </div> <script src="https://code.jquery....

    CSS解决未知高度的DIV垂直居中

    在CSS中,`vertical-align`属性主要用于设置行内元素或表格单元格中的内容垂直对齐方式。但是,当涉及到块级元素时,这个属性并不起作用。因此,我们需要采用其他技术来达到垂直居中的目的。本文介绍的技术基于以下...

    div+css+JQuery仿京东商品详情界面

    "div+css+JQuery仿京东商品详情界面"项目就是这样一个实例,它展示了如何使用这些技术来创建一个类似于京东商城的商品详情页面。这个项目涉及到的主要知识点包括HTML结构、CSS样式设计、以及JavaScript与jQuery的...

    Jquery+div/css 鼠标经过内容切换实例

    本实例重点讲解如何利用 jQuery 和 CSS 技术实现在鼠标经过(hover)某个div元素时,动态切换显示的内容。下面我们将深入探讨这个主题。 首先,我们来理解 `div` 和 `CSS` 的基本概念。`div` 是HTML中的一个通用...

    透明div可以拖动 Jquery特效,CSS+DIV

    透明div可以拖动 Jquery特效,CSS+DIV透明div可以拖动 Jquery特效,CSS+DIV透明div可以拖动 Jquery特效,CSS+DIV

    分别利用css和js来使div中的图片居中

    CSS提供了多种方式使元素居中,对于图片在div中居中,我们可以使用以下几种方法: 1. **绝对定位**: - 设置`position: absolute;` - 使用`left: 50%; top: 50%;`将图片移动到其父元素的中心。 - 由于图片的左上...

    在DIV中图片垂直/水平居中(最简单方法).rar

    在CSS中,有多种方法可以使图片在div中居中,但最简洁的方式通常采用Flexbox或Grid布局。下面是两种方法的实现: 1. **Flexbox布局**: - 首先,将div的display属性设置为`flex`,创建一个弹性容器。 - 接着,...

    华丽设计DIV+CSS+JQuery模板

    在IT行业中,网页设计是至关重要的一环,而“华丽设计DIV+CSS+JQuery模板”则是这个领域中的一种常见实践。这种设计模式充分利用了三种关键技术:HTML(超文本标记语言)、CSS(层叠样式表)和JQuery,来构建美观且...

    DIV+CSS上下左右绝对居中

    在网页设计中,"DIV+CSS上下左右绝对居中"是一个常见的布局需求,尤其是在构建响应式网站时。这个主题涉及到CSS(层叠样式表)的布局技巧,它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...

Global site tag (gtag.js) - Google Analytics