最近看到一个问题就是让绝对定位的div居中，在尝试了top：50%；left：50%；后发现，居中是有问题的并不是想象中的样子

需要再加两句margin-top：-盒子高度的一般px  margin-left:-盒子宽度的一般px；

就这样让一个绝对定位的盒子居中就实现了，但是有一个缺点就是，必须要知道盒子的高宽；

我们可使用css3里面的transform实现，设置left为50%，transform：translateX（-50%）即可实现不得到宽实现居中；

让绝对定位的div居中的更多相关文章

  1. div居中方法总结

    在日常开发过程中,我们会经常使用到div居中来处理布局,今天我就把我在开发过程中,遇到的div居中处理方法总结一下,方便日后查看!        1. 水平居中:给div设置一个宽度,然后添加marg ...

  2. 绝对定位的DIV绝对居中显示

    绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...

  3. css文字居中、图片居中、div居中解决方案

    一.文字居中 若文字只有一行 <!--html代码--> <div class="box"> <p class="text"> ...

  4. 关于百分比宽高div居中并垂直居中问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. bootstrap之div居中

    bootstrap之div居中 偏移列 偏移是一个用于更专业的布局的有用功能.它们可用来给列腾出更多的空间.例如,.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果 ...

  6. 移动页面div居中效果代码

    在线查看效果:http://hovertree.com/texiao/mobile/4.htm 可用手机浏览器查看 以下为HTML文件: <!DOCTYPE html> <html& ...

  7. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  8. 【转】CSS中怎么让DIV居中

    来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html     CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...

  9. 关于div居中

    margin : 100px; margin-left: auto; margin-right: auto; 这样子设置css样式就可以实现一个div居中

随机推荐

  1. C#中打印拼接的字符串

    实例化打印文档 //声明打印对象 PrintDocument pd = new PrintDocument(); int ilvPreviewIndex = 0; 在打印事件中设置基本属性 priva ...

  2. 什么是ZooKeeper？ZooKeeper分布式事务详解

    前言 上一章我们了解了zookeeper到底是什么,这一章重点来看zookeeper当初到底面临什么问题? 而zookeeper又是如何解决这些问题的? 实际上zookeeper主要就是解决分布式环境 ...

  3. Vue - MVVM模式及优点

    MVVM模式 视图层和数据层的双向绑定,让我们无需再去关心DOM操作的事情,更多的精力放在数据和业务逻辑上去 MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想. Mod ...

  4. 大数据量查询容易OOM？试试MySQL流式查询

    一.前言 程序访问 MySQL 数据库时,当查询出来的数据量特别大时,数据库驱动把加载到的数据全部加载到内存里,就有可能会导致内存溢出(OOM). 其实在 MySQL 数据库中提供了流式查询,允许把符 ...

  5. C#扫盲篇（二）依赖倒置•控制反转•依赖注入•面向接口编程--满腹经纶的说

    扫盲系列的文章收到了广大粉丝朋友的支持,十分感谢,你们的支持就是我最大动力. 我的扫盲系列还会继续输出,本人也是一线码农,有什么问题大家可以一起讨论.也可以私信或者留言您想要了解的知识点,我们一起进步 ...

  6. Petalinux和Vivado的安装

    Petalinux和Vivado的安装 背景 我是搞软件的, FPGA这块不太了解.由于机缘巧合,最近有接触到这块的开发.所以先挖一坑. 先声明我不是专业搞这块的,所以对这块的内容理解可能会有偏差,以 ...

  7. Linux调整lvm逻辑分区大小

    转载自:https://www.cnblogs.com/kevingrace/p/5825963.html  个人记录一下   Linux下对lvm逻辑卷分区大小的调整(针对xfs和ext4不同文件系 ...

  8. CODING x 腾讯兔小巢，打破研发团队与用户反馈的最后一道壁垒

    任何产品的更新迭代都离不开用户的使用反馈.产品经理日常需要奔走到一线部门了解用户的使用反馈:一线运营或业务团队日常需要向产品经理转述用户的问题场景及催促需求的进度.中间需要消耗大量的精力来进行信息转达 ...

  9. 7.prometheus之查询API

    一.格式概述 二.表达式查询 2.1 Instant queries(即时查询) 2.2 范围查询 三.查询元数据 3.1 通过标签匹配器找到度量指标列表 3.2 获取标签名 3.3 查询标签值 四. ...

  10. Linux学习笔记 | 常见错误之VMware启动linux后一直黑屏

    方法1: 宿主机(windows)管理员模式运行cmd 输入netsh winsock reset 然后重启电脑 netsh winsock reset命令,作用是重置 Winsock 目录.如果一台 ...