`

用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+JQUERY模板

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

    div+css+jquery

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

    DIV水平垂直居中

    总之,实现`div`的水平垂直居中有多种方法,包括CSS的Flexbox、Grid、绝对定位等,以及JavaScript/jQuery的动态调整。选择哪种方法取决于项目需求和浏览器兼容性要求。在实际开发中,通常会结合使用这些技术来达到...

    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网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法

    DIV+CSS+JQUERY源码实例

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

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

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

    使用CSS+jQuery实现的水平二级菜单

    "使用CSS+jQuery实现的水平二级菜单"是一个常见的技术实践,它结合了层叠样式表(CSS)的样式控制与JavaScript库jQuery的动态效果,以实现优雅且功能丰富的菜单系统。下面将详细介绍这个主题中的相关知识点。 首先...

    网站模板(DIV+CSS+JQUERY)

    本模板特别强调了"DIV+CSS+JQUERY"的运用,这三种技术在现代网页开发中起着至关重要的作用。 **DIV**(层)是HTML中的一个通用容器元素,用于组织页面布局。它通过CSS样式控制,可以实现灵活多变的布局。在本模板中...

    div+css+jquery文档

    【div+css+jquery文档】主要涵盖了网页开发中的三个核心元素:结构(div)、样式(css)和交互(jquery)。这三个部分共同构建了一个动态、美观且功能丰富的网页。 Div(division)是HTML中的一个常用标签,用于将...

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

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

    CSS 图片水平垂直居中于DIV

    在网页设计中,将图片水平垂直居中于一个DIV元素是常见的需求,这涉及到CSS布局技术的运用。本文将深入探讨如何实现这个效果,并提供相关的源码示例。 首先,我们要明白CSS中的定位机制,包括静态定位、相对定位、...

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

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

    CSS+JQuery实现div翻转效果

    "CSS+JQuery实现div翻转效果"是一个常见的交互设计技术,常用于按钮、卡片或登录表单等元素,以增加视觉吸引力和交互性。这个技术结合了层叠样式表(CSS)的3D变换和JavaScript库JQuery的优势,下面我们将详细探讨...

    DIV+CSS上下左右绝对居中

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

    css水平居中4种方式

    要使子元素在容器中水平居中,可以设置容器的`display`属性为`flex`,然后使用`justify-content`属性设置居中对齐: ```css .container { display: flex; justify-content: center; } ``` 2. **Grid布局** ...

Global site tag (gtag.js) - Google Analytics