例:

要让一个width:100px ; height: 100px;的div,相对body居中。

div{ width:100px; height:100px; border: 1px solid black; box-sizing: border-box;

position:absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}

 

 

因为绝对定位是相对于父级进行的定位,而margin是相对于自身进行定位。

所以,先对div绝对定位,相对于父级,距左50%,距右50%。使div定位点相对父级居中。

再设置margin-top, left,为,负的自身height,width的50%,因margin是相对自身原本位置进行定位,所以,

最终结果为div的中点,相对于其父级,居中。达到我们想要的结果

利用绝对定位与margin实现元素居中的更多相关文章

  1. 利用负margin实现元素居中

    原理就是对当前元素的position设置为absolute并且相对于父元素定位,先设置left:50%;top:50%使当前元素的左上角处于父元素的中心位置,之后再应用负margin特性使其中心位于父 ...

  2. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中(转)

    body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

  3. 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  4. 浅谈css中一个元素如何在其父元素居中显示

    css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...

  5. Css元素居中设置

    你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...

  6. css 使元素居中

    css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...

  7. CSS元素居中的常用方法

    只有普通流和绝对定位的元素可以设置居中,浮动元素是不存在居中的. 1.块级元素居中 1) 普通流元素(position : static 或 position : relative) 水平居中:{ m ...

  8. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  9. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

随机推荐

  1. php做EXCEL数据导出导入开发的一些小问题

    前两天刚刚做开发CRM系统项目,在做要做EXCEL导出导入功能,因为以前做.NET开发用的是NPOI,但可是没找到PHP版本的,所以就网搜找了个国外的开源PHPEXCEL , 一开始只是做了简单的导入 ...

  2. NoInstall_Mysql

    安装卸载一直是mysql比较头疼的问题,前几天得知可以用绿色版的mysql,解决了这一难题.

  3. 【Stage3D学习笔记续】山寨Starling(三):Starling核心渲染流程

    这篇文章我们剔除Starling的Touch事件体系和动画体系,专门来看看Starling中的渲染流程实现,以及其搭建的显示列表结构. 由于Starling是模仿Flash的原生显示列表,所以我们可以 ...

  4. iOS7 人机界面设计指南

    iOS7 人机界面设计指南     苹果在WWDC 2013大会上发布了iOS 7,新系统一改5年来的拟物路线,在乔纳森•艾维的主导下,加入了更多的“扁平化”和“极简”现代设计元素. iOS7系统界面 ...

  5. ECSHOP在线手册布局参考图--积分商城 exchange_list.dwt

        A.购物车 1,设置方法 程序自动读取购物车的商品数量 2,代码相关 cart.lbi 中 {insert_scripts files='transport.js'} <div clas ...

  6. mac ssh会话复制

    第一次登录服务器,需要输入账户.密码, 如果你需要重新开启另一个终端窗口,再次登录此服务器不需要输入账户.密码(类似免登).你只要让本地保存你的SSH会话即可. Mac 保持会话,需要在修改 ssh配 ...

  7. IIS连接数

    IIS连接数,也叫IIS并发数(Current Connections),是指同一时间内,有多少个对服务器的请求 一般情况下一个浏览器会占用2个IIS连接 同一个浏览器(IE.Firefox等)窗口中 ...

  8. BZOJ 1143: [CTSC2008]祭祀river 最长反链

    1143: [CTSC2008]祭祀river Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline ...

  9. delphi 窗体透明

        TransparentColor:=true;    TransparentColorValue:=clFuchsia;    Color:= TransparentColorValue;  ...

  10. c++ 操作注冊表

    1.       注冊表简单介绍 注冊表是为Windows NT和Windows95中全部32位硬件/驱动和32位应用程序设计的数据文件,用于存储系统和应用程序的设置信息.16位驱动在Winnt (W ...