让绝对定位原素快速居中

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

【CSS3 基础】全面入门学习

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

css总结

什么是css 用于美化页面, 装饰页面的 css样式规则 #dv {width: 32px; height: 40; color:"red"} 1, 选择器后面跟一个花括号, 选择器和花括号之间要有一个空格 2, 花括号内有多个键值对, 每一对后面跟个分号 ...

position

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

CSS-初学5

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

CSS(五)

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

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

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

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

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

CSS

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

CSS学习笔记

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

css笔记

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

css3笔记

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

css

10.CSS定位 11.CSS高级技巧强化CSS CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成...

花年记事div笔记

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

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

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

前端面试题大全

前端常见面试题 （导人文本为MD格式） vue 什么是生命周期 Vue实例从创建到销毁的过程，就是生命周期。 从开始创建、初始化数据、变编译模板、挂载DOM->渲染、更新->渲染、销毁等一系列过程，称之为Vue的...

web总结

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

第一课 关于侧边栏下拉手风琴的实现

一、 主要知识点：html布局，css变换，js事件触发 二.CSS属性记忆： CSS规则：子元素会继承父元素的布局属性。不专门改变子元素的属性，其会跟随父元素。 ...关于文本的水平居中为： text-alig...

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

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

summer.px

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

非常详细的Echarts介绍

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

css中奇怪的地方

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

图表制作工具之ECharts

简介 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

ECharts详细说明

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

MFC上位机与STM32下位机通讯精讲

本课程主要介绍C++类库MFC上位机与STM32单片机的RS232、RS422、RS485、USB、LWIP以太网、CAN等接口进行稳定通信。课程主要从MFC和STM32基础开始，以编写上位机以及下位机为主，非常注重实践。 本课程主要目标是让大家学会MFC上位机的编程、STM32下位机编程。单单的会上位机或者下位机有时候体会不到通讯的乐趣，如果你单单会下位机，你学了本课程，你可以把你的数据以任何方式在windows上呈现出来，如果你只会上位机，你学了本课程你可以通过windows的串口、以太网、USB控制任何硬件设备。本课程的目标就是补偿大家的短处，让大家成为综合性人才，同时让大家体会到通讯中的更多乐趣。

差分方程的阻滞增长模型 matlab

差分方程的阻滞增长模型，取b=[2.5, 3.5]，间隔0.01取值，计算差分方程的收敛点。文档包含MATLAB代码

C语言大型软件设计的面向对象

C语言代码一旦达到一定规模，就特别强调良好的架构设计，以保证代码的可读性好、代码简洁以及可复用。此时，软件设计师势必要用C语言来做面向对象的设计。不能克服面向对象这一关，也是很多人无法读懂Linux内核、驱动等架构比较庞大的软件的主要技术壁垒之一，因为这些软件里面充满了对象式的设计。 本课程以案例来详细讲解，用C语言如何设计面向对象的程序。 本课程以案例来详细讲解，用C语言教大家如何设计面向对象的程序。

Android开发入门60个小案例+源代码

适合初学者，大量简单小例子，完整源代码。

相关热词 c# cad 坐标转换 c# 窗口内运行word c#获取当前路径的上一级 c#窗体最大化控件不变 c# 程序更新程序案例 c# 中的word类库 矩阵乘法c# c# 去空格去转义符 c#用户登录窗体代码 c# 流