`
ytuwlg
  • 浏览: 93754 次
  • 性别: Icon_minigender_1
  • 来自: 威海
社区版块
存档分类
最新评论

DIV 居中

    博客分类:
  • CSS
阅读更多

用的是相对定位的办法,其中css代码如下:
#div {
    
position:absolute;
    
top:50%;
    
left:50%;
    
width:200px;
    
height:200px;
    
background-color#66666F;
    
margin-top: -100px;
    
margin-left: -100px;
}


其实过程也很简单,首先第一步, position:absolute; top:50%; left:50%;用上边的这个玩意相对定位了,div这个容器的跑中间了,但是要注意的是,虽然是定义了50%,但是并不是容器的中心点和屏幕的中心点重合,为啥呢?简单,就是相对定位的两个参照物的问题,这里定义的是div的左上角相对于整个屏幕位于屏幕中央,所以才形成了上边说的情况。具体情况的例子见:http://www.gengbing.com/demo/007/index.html

不行不行,这个问题一定要解决,怎么办怎么办?看后面阿,后面不时还有文章呢啊,什么啊,就是margin-top:-100px;margin-left:-100px;这个玩意作什么用的阿?没啥大用,就是把div的左上角分别向上和左移动div高度和宽度的一半,这样不就把div放中间了,哈哈,其实就这么简单。修正后的例子:http://www.gengbing.com/demo/007/index2.html

分享到:
评论

相关推荐

    DIV+CSS DIV居中布局

    本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先,我们要理解`<div>`元素。`<div>`是“division”的缩写,代表一个区域或区块,在HTML中用于组合其他元素,是构建网页布局的基础。通过设置`<div>`...

    DIV居中及DIV垂直居中.html

    该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.

    div居中div居中的8种方法

    标题提到的“div居中div居中的8种方法”是网页开发中的基础技巧,适用于不同场景。以下将详细解释这8种方法,并提供相关的应用示例。 1. **CSS Flexbox居中** CSS3的Flexbox模型提供了非常方便的居中方式。在父...

    div层居中代码下载

    通过上述介绍,我们了解到实现DIV居中的方法有很多种,包括使用`text-align: center;`、`margin-right: auto;`和`margin-left: auto;`等CSS属性,以及使用Flexbox或Grid布局。选择哪种方法取决于具体的应用场景和...

    div居中-divjuzhong-master.zip

    在前端开发中,"div居中" 是一个常见的布局需求,尤其在构建网页时,我们需要让div元素在页面上水平或垂直居中显示。这里,我们主要探讨如何使用CSS(层叠样式表)来实现这一目标,同时也会涉及到HTML的基本结构。 ...

    一款jQuery+DIV居中淡入淡出信息提示框示例

    总的来说,"一款jQuery+DIV居中淡入淡出信息提示框示例"结合了前端开发的多个核心知识点,包括jQuery的使用、CSS布局、事件处理和动画效果,展示了如何通过JavaScript和CSS实现一个优雅的交互效果。通过学习和理解这...

    通过JavaScript使Div居中并随网页大小改变而改变

    以前的想法是通过CSS+Div使div居中,但是现在的想法变了,通过JavaScript可以简单的使Div在页面上居中,随着网页大小的改变做出相应的改变。而且只要明白了居中的原理轻而易举的就可以实现了。 先看一下居中的原理吧...

    Jsp中如何让图片在div中居中

    当涉及到在div中居中一张图片时,CSS是实现这一目标的主要工具。图片在HTML中的默认对齐方式取决于其父元素的样式设置。通常情况下,图片本身并不会继承display属性。然而,当图片作为某个元素的子元素时,可以通过...

    div水平居中的方法

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

    HTMl、js中设置div的透明度(非常实用)、div居中

    非常实用的页面制作,用于设置div的透明度,以及div在页面左右居中

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

    以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧,开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中,还需要根据不同的项目需求,...

    JS实现div居中示例

    /*外层div居中*/ #main { position: absolute; /*极为重要*/ background-color: blue; width:400px; height:200px; /*left:50%; top:50%; margin-left:-200px; margin-top:-100px;*/ border:1px solid #00F; } #...

    div居中常见问题.pdf

    例如,一个包含文本的 `div` 元素,可以通过以下 CSS 代码将其内部文本居中: ```css .txtCenter { text-align: center; } ``` 接下来,我们讨论块状元素的居中。对于定宽的块状元素,可以使用 `margin` 属性的...

    div居中常见问题.docx

    在网页设计中,元素的居中布局是一种常见的需求,尤其对于创建美观和用户体验良好的网站至关重要。本文主要探讨了如何通过CSS实现不同类型的元素的水平居中。 首先,对于行内元素(如文本或图像),我们可以使用`...

    让横向排列的几个浮动(float:left)的子div居中显示

    div设置成float之后,在父div中设置text-align:center,就无法使子div居中显示了,不过我们可以使用变通的方法达到这一效果,就是在父div上再套一个div,如下: 复制代码代码如下: <div id=”outerdiv” xss=...

    前端笔记前端笔记前端笔记前端笔记,一些div居中以及常用的CSS属性

    本篇笔记主要探讨了如何使`div`元素居中以及一些常用的CSS属性,这些都是前端开发者日常工作中不可或缺的基础知识。 一、`div`元素居中方法 1. **margin自动填充**:设置`div`的`margin`为`auto`,可以使其在父...

    div居中显示的css样式代码

    在网页设计中,让元素居中显示是一种常见的需求,尤其是对于`div`这样的块级元素。`div`居中显示的CSS样式代码是实现这一目标的关键。本文将深入讲解如何使用CSS来使`div`元素水平和垂直居中,并通过一个具体的示例...

    css实现文本和div居中对齐详细讲解示例

    【CSS实现文本和div居中对齐】 在网页设计中,居中对齐是一种常见的布局需求,CSS提供了多种方法来实现文本和div的居中效果。以下是对这些方法的详细讲解: 1. **文本居中** - **水平居中(使用`text-align`)**...

    实现让多个DIV排列时居中

    实现让多个DIV排列时居中 css div 并列居中

Global site tag (gtag.js) - Google Analytics