`
highfly-s
  • 浏览: 100710 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

div 在浏览器居中

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
/*]]>*/
</style>
</head>
<body>
<div>web标准常见问题大全</div>
</body>
</html>
--------------------------------------

margin:-100px 0 0 -100px;

分别指的是  元素本身高的二分之一  和宽的二分之一,  当为负数的时候 也即是从TOP,LEFT 中的50% 减去了 自身高的二分之一了 这就符合水平垂直居中

分享到:
评论

相关推荐

    一个div在浏览器水平居中的实现方法

    一个div在浏览器水平居中的实现方法 第一种方法: CSS Code复制内容到剪贴板 div { margin: 0 auto; width: 960px; }  第二种方法(兼容IE): CSS Code复制内容到剪贴板 body { text-align: ...

    js实现div随浏览器高度变化

    js实现div随浏览器高度变化,主要是高度变化和实现滚动条,还有侧栏显示隐藏,可以作为一个地图开发界面的参考

    div内容垂直居中+通用所有浏览器

    通用所有浏览器, 谢谢详细信息详细信息详细信息

    DIV+CSS DIV居中布局

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

    DIV水平垂直居中

    在网页设计中,让一个`div`元素在页面上实现水平和垂直居中是一项常见的需求。这个主题,"DIV水平垂直居中",通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中,描述提到使用了jQuery来实现,这是一...

    div的内容图片垂直居中代码(兼容多浏览器).rar

    在网页设计中,让图片或其他内容在div容器中垂直居中是一个常见的需求,尤其是在多浏览器兼容性方面。这里我们将深入探讨如何实现这个功能,并结合JavaScript(JS)特效和CSS样式来达成目标。首先,让我们先了解一些...

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

    在网页设计中,将图片在div中垂直和水平居中是一项常见的需求,这涉及到CSS布局技术的运用。本文将深入探讨如何使用最简单的方法来实现这个目标,同时也会涉及JavaScript(JS)的一些特效,尽管在描述中没有明确指出...

    css三种方法实现div在浏览器水平居中

    本文教大家如何实现一个div在浏览器水平居中,下面是三种解决方法,具体内容如下 第一种方法: CSS Code复制内容到剪贴板 div { margin: 0 auto; width: 960px; }  第二种方法(兼容IE): CSS Code复制...

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

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

    DIV+CSS 图片垂直居中效果

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

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

    ### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...

    DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器

    DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器

    div内容 垂直居中

    通用所有浏览器, 欢迎大家分享。 绝对是真的

    div 图片上下居中,左右居中

    div 图片上下居中,左右居中 ,兼容多版本浏览器

    网页div在屏幕正中间显示

    网页div在屏幕正中间显示

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

    在`juzhong.html`示例文件中,可能包含了以上各种方法的实际应用,通过查看代码和在浏览器中预览,可以更直观地理解这些居中技巧的效果。学习和熟练掌握这些方法对于提高网页布局能力至关重要,特别是在响应式设计中...

    div垂直居中的N种方法

    在网页设计中,DIV元素的垂直居中一直是前端开发者关注的焦点。无论是响应式布局的需求,还是美观度的提升,垂直居中的实现都能显著增强用户体验。本文将深入探讨并演示多种实现DIV垂直居中的方法,包括但不限于使用...

    DIV 上下居中 多行 省略号

    在网页设计中,让`&lt;div&gt;`元素内的多行文本实现上下居中并添加省略号功能是一项常见的需求。这通常涉及到CSS布局、文本对齐和溢出隐藏等多个技术点。接下来,我们将深入探讨如何实现这个效果。 首先,我们要解决的是...

Global site tag (gtag.js) - Google Analytics