让绝对定位原素快速居中

Web 开发 > HTML(CSS)
收藏 回复
[问题点数：40分，结帖人chenjwjw]
更多帖子
私信 空间 博客
chenjwjw
等级
本版专家分：44
结帖率 100%
根据绝对定位特点，假设某原素已设定位属性为绝对定位：position:absolute;那么该元素就会脱离正常文档流，此时设了绝对定位的元素的left,top,bottom,right的值如不设，默认并不是为0，该元素还会停留在原来的位置，只是不在正常文档流之中！同时该元素仍可以使用margin进行边距的偏移，而偏移的参照物就是其本身！因为绝对定位使用方向偏移再混合margin的方向偏移，两都同方向的值会累加！如left:20px;margin-left:20px;此时实际偏移的值是40px;根据这个规律，假如想让这个具有绝对定位的元素居中就有办法了！可以设：left:0px; right:0px; top:0px;而再设置margin:0px auto;即可使该元素靠上居中显示！这点在做顶部时也很方便哦！
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
001007009
等级
本版专家分：55809
勋章
Blank
金牌 2012年5月 总版技术专家分月排行榜第一
Blank
银牌 2012年6月 总版技术专家分月排行榜第二
Blank
红花 2012年6月 Web 开发大版内专家分月排行榜第一
2012年5月 Web 开发大版内专家分月排行榜第一
Blank
黄花 2012年7月 Web 开发大版内专家分月排行榜第二
光看这个方法，起初表示怀疑，虽说absolute之后，margin有效，但是用0 auto来居中怎么会有效果？
top left right bottom同时出现有疑问，因为之前也遇到过类似问题，同时出现的话，只有left，top有效，换句话説left top 比 right bottom的优先级高。

测试了下，在ff下居然真的句中了，但是ie6下却无动于衷。



<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<style>

			span {

				width:100px; height:100px;

				border:1px solid red;

				position:absolute; left:0; top:0; right:0; bottom:0;

				margin:0 auto;

			}

		</style>

	</head>

	<body>

		<span>123</span>

	</body>

</html>


由于上面对4个方向的作用提出了质疑，于是又测试了下，把right删除了，ff却不居中了，可见right是起了作用的，确实有些疑惑，再思考下。


<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<style>

			span {

				width:100px; height:100px;

				border:1px solid red;

				position:absolute; left:0; top:0; bottom:0;

				margin:0 auto;

			}

		</style>

	</head>

	<body>

		<span>123</span>

	</body>

</html>

只看TA 引用 举报 #1得分 10
更多帖子
私信 空间 博客
去圣西罗-为尤文喝彩
等级
本版专家分：8008
<div style="position:fixed;width:100%;height:80px;left:0;bottom:0">
    <div style="position:relative;width:960px;margin:0 auto;height:80px;background:#ccc;display:block;">
        &nbsp;
    </div>
</div>
只看TA 引用 举报 #2得分 5
更多帖子
私信 空间 博客
ddcatlee
等级
本版专家分：13201
勋章
Blank
蓝花 2004年7月 多媒体/设计/Flash/Silverlight 开发大版内专家分月排行榜第三
google -》绝对定位元素的box model
只看TA 引用 举报 #3得分 0
更多帖子
私信 空间 博客
happy59
等级
本版专家分：844
span {
        width:100px; height:100px;
        border:1px solid red;
        position:absolute; left:50%;
        margin-left:-50px;/*50%宽度*/
      }
只看TA 引用 举报 #4得分 15
更多帖子
私信 空间 博客
kinghome
等级
本版专家分：2415
span {
  width:100px; height:100px;
  border:1px solid red;
  position:absolute; 
  left:50%;top:50%;
  margin: -50px -50px;
  }
只看TA 引用 举报 #5得分 10
收起
收藏 回复
chenjwjw

等级：

关注 私信 TA的帖子
元素居中的五种方法

在网页开发中，经常会有嵌套元素中将子元素居中的要求。下边将五种常用的居中方法进行总结。 1：原始图（父子元素无border，无padding）： 2：实现居中效果： 一：使用margin进行固定长度的偏移 在使用...

css块级元素实现水平垂直居中方法

总结css块级元素水平垂直居中方法 方法一：已知宽高 &lt;style&gt;  .wrapper{  width:500px;  height:500px;  border:1px solid #bbb;  position:relative; /*给父元素设置相对定位*/  }  .demo{ ...

花年记事div笔记

边框大小 border   border-width:thin  //细 border-width:medium //默识边框宽度 border-width:thick //粗一点 border-width:   //可用数值来指定 border-top-width:**px;  //设置上边框 ...borde

【江哥带你从“零”玩转Html5 + 跨平台开发】学习笔记

主要是学习【江哥带你从“零”玩转Html5 + 跨平台开发】过程中记录的一些知识点，方便以后查找。

非常详细的Echarts介绍

非常详细的介绍（转） 简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，...

ECharts-Javascript的图表库推荐

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的...

ECharts · Doc

http://echarts.baidu.com/echarts2/doc/doc.html ... ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/1

CSS

课程目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 ...熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy...

【CSS3 基础】全面入门学习

文章目录字体样式属性font-size:字号大小font-family:字体CSS Unicode字体font-weight:字体粗细font-style:字体风格font:综合设置字体样式选择器标签选择器（元素选择器）类选择器多类名选择器id选择器通配符选择器...

让绝对定位原素快速居中

ECharts详细说明

简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量...

图表制作工具之ECharts

简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级...

summer.px

跟随长航大佬培训的笔记哈哈哈哈 标签语义化 aside ...1）单行文本垂直居中 line-height=容器height 2)d多行文本垂直居中 display:table-cell; vertical-align:middle; 3)left:50%;top:50%; ma

web总结

4. ... url 统一资源定位符，也被称为网页地址。是因特网上标准的资源地址。  http的表现方式（浏览器中地址栏url）  http://主机/资源?参数  工作过程：Browser通过url请求主机资源，Serv

echarts详细说明

简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量...

【网页设计】CSS基础全面入门

文章目录字体样式属性font-size:字号大小font-family:字体CSS Unicode字体font-weight:字体粗细font-style:字体风格font:综合设置字体样式选择器标签选择器（元素选择器）类选择器多类名选择器id选择器通配符选择器...

web前段基础知识汇总：HTML+css

前端：结构+样式+行为 ... 元素：标签及标签之间的内容这个整体 标签的分类 1、块级：p段落、h1~h6标题、div、br换行、hr分割线、ul无序列表、ol有序列表、li列表项、dl定义列表、dt名词、 dd解释、form表单域、...

垂直水平居中总结

1,flex或者grid布局(可用于未知子元素宽高) .box{ width: 500px; height: 500px; border: 1px solid #000; display: flex; } .content{ margin: auto; } .box {...

css中奇怪的地方

1.border-color 继承内部元素前景色(color:black.可能对元素本身没有效果) 2.border-style:none;...4.背景是固定的（fixed），background-attachment:fixed,则都是从窗口左上角开始定位，而不是本...

仿写京东之巨详细CSS知识点加Html布局

仿写京东过程中经常碰到的CSS问题 CSS 常用属性 opacity: 1 !important; 加权重 透明度 transparent 排列（一行） align ...悬停 hover a :hover 鼠标（手）放上去 类名或者标签名加：hov...

position

定位(position) 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。 元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。 1、边偏移 边偏移属性 描述 top ...

CSS-初学5

定位(position) 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。 元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。 1、边偏移 边偏移属性 描述 top ...

CSS学习笔记

课程目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 ...10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发...

CSS(五)

CSS—定位(position) 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。 元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。 边偏移 边偏移属性 描述 ...

css3笔记

css(层叠样式表) CSS的发展历程 从HTML被发明开始，样式就以各种形式存在不同的浏览器...CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者 让我们的网页更加丰富多彩 CSS初识 Cascading Style Sheets

css笔记

css(层叠样式表) CSS的发展历程 从HTML被发明开始，样式就以各种形式存在不同的浏览器...CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者 让我们的网页更加丰富多彩 CSS初识 Cascading Style Sheets

Python3.2.3官方文档（中文版）高清完整PDF

Python3.2.3官方文档（中文版） 由笔者自己翻译，有不当之处希望在博客上相互交流

Qt图形视图框架详解

介绍Qt中的Graphics View Framework，涉及View、Scene、Item的关系，如何自定义QGraphicsItem、处理Item之间的关联、如何布局及定义自己的布局Item、如何变幻Item、如何应用动画、如何处理拖放、如何给Item应用图形效果，提供拼图游戏、画板两个有用的实例。 通过本课程的学习，能够掌握Qt Graphics View Framework的基本应用，使用图形视图框架开发需要丰富的GUI效果的应用软件以及需要维护大量图元的、对图形界面层次要求较高的应用。

c语言项目开发实例

十个c语言案例 （1）贪吃蛇 （2）五子棋游戏 （3）电话薄管理系统 （4）计算器 （5）万年历 （6）电子表 （7）客户端和服务器通信 （8）潜艇大战游戏 （9）鼠标器程序 （10）手机通讯录系统

navicat简体中文版 绿色版 （64位）

解压后安装navicat，打开navicat执行PatchNavicat即破解成功。可以正常使用啦。

相关热词 c#编译器 学习 c#和其他语言相比 c# 什么是管道 c# 在ui线程中运行 c# 动态增加枚举 c# panel边框 c#调用dll报错 c# 编写dll c# dll修复工具 c# timer 多线程